jquery
  1. jquery-scrolltop
PreviousNext

jQuery scrollTop()

jQuery scrollTop() is a method that allows you to get or set the vertical scrollbar position in an element. It can be useful for controlling the scroll position of a webpage or manipulating the position of an element within a scrollable container.

Syntax

To get the vertical scrollbar position of an element, you can use the following syntax:

$(selector).scrollTop()

To set the vertical scrollbar position of an element, you can use the following syntax:

$(selector).scrollTop(value)

Use

The scrollTop() method can be used to implement various functionality in your webpage. For example, you can use it to create a "back to top" button that scrolls the user to the top of the page when clicked. You can also use it to control the scroll position of specific elements on your webpage, such as a modal or a dropdown menu.

Example

Here is an example of using scrollTop() to create a "back to top" button:

HTML:

<button id="back-to-top-btn">Back to Top</button>
<div class="content">
    <!-- Content goes here -->
</div>

JavaScript:

$(document).ready(function() {
    // Hide the button when the page loads
    $('#back-to-top-btn').hide();
    
    // Show the button when the user scrolls down 200 pixels
    $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
            $('#back-to-top-btn').fadeIn();
        } else {
            $('#back-to-top-btn').fadeOut();
        }
    });
    
    // Scroll to the top of the page when the button is clicked
    $('#back-to-top-btn').click(function() {
        $('html, body').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Scroll to Top Example</title>
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #back-to-top-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: none;
        }
    </style>
</head>
<body>

    <button id="back-to-top-btn">Back to Top</button>
    <div class="content">
        <!-- Add some content to make scrolling possible -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
    </div>

    <script>
        $(document).ready(function() {
            // Hide the button when the page loads
            $('#back-to-top-btn').hide();

            // Show the button when the user scrolls down 200 pixels
            $(window).scroll(function() {
                if ($(this).scrollTop() > 200) {
                    $('#back-to-top-btn').fadeIn();
                } else {
                    $('#back-to-top-btn').fadeOut();
                }
            });

            // Scroll to the top of the page when the button is clicked
            $('#back-to-top-btn').click(function() {
                $('html, body').animate({
                    scrollTop: 0
                }, 500);
                return false;
            });
        });
    </script>
</body>
</html>
Try Playground

In this example, we use scrollTop() to determine when the user has scrolled down 200 pixels on the page. When this happens, we show a "back to top" button and allow the user to click it to scroll back up to the top of the page. The button functionality is achieved with the animate() method, which smoothly scrolls the page up to the top over a period of 500 milliseconds.

Summary

jQuery scrollTop() is a useful method that allows you to get or set the vertical scrollbar position in an element. It can be used to create various functionality on your webpage, such as a "back to top" button or controlling the scroll position of specific elements. With its simple syntax and versatility, scrollTop() is a great tool for web developers.

detach()attr()
Published on: