Question 280530 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I scroll an entire page using jquery

I’m looking for a way to always scroll up or down an entire page ($(window).height) when using the scroll bar or the mouse.

I’ve already tried a few things, but in the code displayed I always scroll to the end of the document

var lastScrollTop = 0;
    $(window).scroll(function(event){
        var st = parseInt($(this).scrollTop());
        var hg = parseInt($(window).height());
        if (st > lastScrollTop){
            $(document).scrollTop(st + hg);
        }
        lastScrollTop = st;
    });
Tags:

2

Answers


  1. 0

    Based on your description and code, it seems that you want the page to scroll directly to the top or bottom on scroll. Here is a sample code that you can try:

    <!DOCTYPE html>
<html>
<head>
    <title>Direct Section Scroll</title>
    <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script>
    <script>
        $(document).ready(function(){
            var scrolling = false;

            // Adding event listener with { passive: false } to avoid the 
            passive event listener warning
            window.addEventListener('wheel', function(e) {
                e.preventDefault(); // Prevent default scrolling

                if (!scrolling) {
                    scrolling = true;
                    setTimeout(function() {
                        scrolling = false;
                    }, 800);
                    var scrollAmount = $(window).height();
                    if (e.deltaY < 0) {
                        // Scrolling up
                        $("html").stop().animate({
                            scrollTop: 0
                        }, 600);
                    } else {
                        // Scrolling down
                        $("html").stop().animate({
                            scrollTop: $(document).height() - $(window).height()
                        }, 600);
                    }
                }
            }, { passive: false });
        });
    </script>
    <style>
        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3em;
        }
        #section1 {
            background-color: lightblue;
        }
        #section2 {
            background-color: lightgreen;
        }
        #section3 {
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <section id="section1">
        Section 1
    </section>
    <section id="section2">
        Section 2
    </section>
    <section id="section3">
        Section 3
    </section>
</body>
</html>
    Login or Signup to reply.
  2. 0

    To achieve scrolling in two directions (up and down) you need to update your code, here is an example:

    var lastScrollTop = 0;
$(window).scroll(function(event){
    var st = $(this).scrollTop();
    var hg = $(window).height();

    if (st > lastScrollTop){
        // Scrolling down
        $('html, body').stop().animate({
            scrollTop: '+=' + hg
        }, 100);
    } else {
        // Scrolling up
        $('html, body').stop().animate({
            scrollTop: '-=' + hg
        }, 100);
    }

    lastScrollTop = st;
});
    body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
.content {
    height: 1500px;
}
    <html>
<head>
    <title>Scroll Page Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        
    </style>
</head>
<body>
    <div class="content">
    </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search