hide the scroll button when at the top of the page and hide it when at the bottom

Looking to create a vertical scroll that hides the up button when at the top and hides the down button when at the bottom? Jquery can help with this, but sometimes it's tricky to get it just right. Take a look at an example here.

Below is the code snippet:

HTML:

 <div class="twobytwostandard">
                <div id="up">
                    up</div>
                <div class="twobytwostandardmiddle">
                    <ul>
                        <li>
                            <div class="w6392597">
                                ...

CSS:

 .twobytwostandardmiddle
        {
            height: 278px;
            ...
        }

...

        .w6392597
        {
            ...
        }

JQuery:

$(document).ready(function () {

            $(document).on("click", "#down", function () {
                var scrollval = $('.w6392597').height();
                ...

            });
            $(document).on("click", "#up", function () {
                var scrollval = $('.w6392597').height();
                ...

            });
        });

Hope this helps!

Answer №1

I want to express my gratitude for the guidance provided by Vertical scrolling using jQuery which helped me modify and implement my own solution successfully:

If you're interested, you can check out my implementation on this JSFiddle link.

Here is the JQuery code snippet that made it all work:

$(document).ready(function(){
       $("#up").hide();
    // get the number of .child elements
    var totalitems = $(".twobytwostandardmiddle .w6392597").length;
    // get the height of .w6392597
    var scrollval = $('.w6392597').height();
    // calculate total height.
    var totalheight = (totalitems*scrollval)-($(".twobytwostandardmiddle").height());

    $(document).on("click", "#down",function(){
        var currentscrollval = $('.twobytwostandardmiddle').scrollTop();

        $('.twobytwostandardmiddle').scrollTop(scrollval+currentscrollval);

        // hide/show buttons
        if(currentscrollval == totalheight) {
            $(this).hide();         
         }
         else {
             $("#up").show();
         }
    });
     $(document).on("click", "#up",function(){
         var currentscrollval = parseInt($('.twobytwostandardmiddle').scrollTop());

        $('.twobytwostandardmiddle').scrollTop(currentscrollval-scrollval);

         // hide/show buttons
         if((scrollval+currentscrollval) == scrollval) {
            $(this).hide();         
         }
         else {
             $("#down").show();
         }
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Opt for a horizontal WordPress drop-down menu instead of the typical vertical layout

I am looking to customize a menu in WordPress by creating a horizontal drop-down menu instead of the default vertical layout. An example of what I am aiming for can be seen on this website. If you hover over OUR SECTORS, you will see the type of menu I am ...

Prevent repeating the same table header multiple times when generated dynamically with jQuery

I have an array called groups which contains name and regid. I want to display the name key as the column header of a table. To achieve this, I implemented the following code: var Name = v.name; var regId = v.regid; var rowStr = '<th d ...

Turn off browser feature that automatically adds overflow:hidden on touch screen devices

Encountering a problem with browsers (potentially Chrome) adding CSS rules on touch-enabled devices. In a website developed for a client (specifically for Chrome), the scroll bars disappear on elements when accessed from their ultrabooks. The client still ...

Tips for dynamically injecting HTML content in an Angular web application

I'm currently working on an angular website dedicated to a specific book. One of the features I want to include is the ability for users to select a chapter and view an excerpt from that chapter in HTML format. However, I'm facing a challenge wh ...

How can I showcase API information on a website with the help of Node.js?

Hello everyone, I'm a beginner at creating websites and I am eager to explore nodejs. Currently, I am utilizing an API to retrieve data in node: request(options, function (error, response, body) { if (error) throw new Error(error); console.log(b ...

What is the best way to add content to a TextArea generated by the html helper in MVC 3?

I am attempting to retrieve a List collection of comments from the View using Razor and Microsoft's HTML helper for TextArea (@Html.TextAreaFor). While I can populate individual comments easily, I am unsure how to add the ENTIRE list collection of com ...

The flex-wrap property with a value of "nowrap" does not seem to

I am struggling with making the page responsive. The flex-wrap: nowrap property seems to be causing issues. Can someone please assist me in identifying the root of the problem? .logo { text-decoration: none; color: white; } .header { width: ...

Is a webpage's sluggishness in Internet Explorer due to its lengthy page structure causing issues while loading quickly on other browsers?

My application has a page that is particularly long, around 8Mb of source HTML mainly comprised of tables. I am aware that this indicates poor architecture, but unfortunately, I am unable to make immediate changes due to certain constraints. In most brows ...

Is there a way to input data into an AngularJS modal?

I'm looking for some assistance : How do I go about loading data into the content of an angular modal? Is there a way to load custom data for a selected item? ............................................................. This is the code ...

The design problem arises from using jQuery to dynamically prepare the table body at runtime

The table row and data are not appearing in the correct format. Here is a link to the problem on Fiddle: http://jsfiddle.net/otc056L9/ Below is the HTML code: <table border="1" style="width: 100%" class="eventtable"> <thead style="color: b ...

How can Node.js and Socket.io be used with either PHP or jQuery to search within a text file?

I currently have a setup where I am using node and socket io to transmit a dynamic time format (HH:MM:SS) to my apache-served index.php file. I have successfully implemented the functionality to display the time in the PHP file. Now, my goal is to dynamic ...

What is the process for submitting a form to a PHP page?

Could you assist me in posting a form with two fields on a php page using $_POST['json']; where the object will be of json type? <div id="result"></div> <form name="form" id="form" method="post" > Name: <input type="text ...

Shifting the image below the text for mobile display

My goal is to place an image below a block of text when viewed on a mobile device, but currently, the image is covering the text. Here is how it appears on desktop: [![enter image description here][1]][1] This is the current mobile view (the image is ov ...

Using Javascript to Assign Value to Variables

I have been working on this code snippet: http://jsfiddle.net/9B84H/26/ function autosuggest() { var input = document.getElementById('location'); var options = {types: [],}; var autocomplete = new google.maps.places.Autocomplete(input, o ...

Return to the initial position in Selenium using Java

I recently scrolled a table horizontally, but now I want to return to the starting position. Any tips on how to achieve this? This is the code snippet I used to scroll the table: ((JavascriptExecutor)driver).executeScript("arguments[0].scrollLeft += ...

Accessing the URL '/Main/[object Object]' using the HTTP method POST is forbidden

Jquery method call: $.post({ url: "http://localhost:60700/Main//Data/dataServices.aspx", data: { action: "savePhoneData", phoneID: PhoneID, values : JSON.stringify(allData) }, success: phoneSaved, error: phoneSavedFaile ...

Tips and tricks for selecting a specific element on a webpage using jQuery

How can I modify my AJAX form submission so that only the content within a span tag with the id "message" is alerted, instead of the entire response page? $.ajax({ url: '/accounts/login/', data: $(this).serialize(), success: function(ou ...

Requesting information asynchronously returns a positive response

I wrote the following code: if (venue_exists(instagramUserID)){ alert('A'); }else { alert('C'); } function venue_exists(instagramUserID) { $.get( "/venues/" + instagramUserID, function( ...

Can anyone tell me the location of the modalColor with the background set to 'greenYellow' in the popup window?

Take a look at the sample in jQuery.bPopup.js called Example 2b I am trying to design a popup window with customized text and background style, using the Example 2b, custom settings: Simple jQuery popup with custom settings (Jamaican popup, relax man) $ ...

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...