jQuery: Scroll down page a set increment (in pixels) on click?

Question

I'm trying to make a page scroll down 150px from the current position when an element is clicked. So lets say you're roughly halfway scrolled down a page. You click this link, and it will slide you down an additional 150 pixels.

Is this possible with jQuery?

I've been looking at scrollTop and the scrollTo plugin, but I can't seem to connect the dots.

Love to see the code you're working with, it may be most of the way there and there's just a simple problem. — Chuck Vose, Apr 17 '10 at 17:48
I don't have code to show yet. As an alternate solution, I'm scrolling down to a specific #ID, but I'm trying to make this more dynamic by scrolling down 150px from where you were at. — bcWeb, Apr 19 '10 at 13:21

score 122 · Answer 1 · answered Aug 11 '12 at 00:39

122

var y = $(window).scrollTop();  //your current y position on the page
$(window).scrollTop(y+150);

answered Aug 11 '12 at 00:39

Mohamed Hafez

8,621
7
41
49

29

Thanks, this worked for me.. for a kind of page down effect. `var y = $(window).scrollTop(); $("html, body").animate({ scrollTop: y + $(window).height() }, 600); ` – The HCD Apr 03 '13 at 14:11
**Add** to move the scrollbar down, which moves the page up, to see a lower part of the page. **Subtract** to move the scrollbar up, which moves the page down to see a higher part of the page. (I believe the only people who get this right the first time are those who make TWO mistakes in their thinking, and they cancel out.) – Bob Stein Sep 02 '20 at 14:45

score 51 · Answer 2 · answered Aug 20 '15 at 08:17

51

Just check this:

$(document).ready(function() {
    $(".scroll").click(function(event){
        $('html, body').animate({scrollTop: '+=150px'}, 800);
    });
});

It will make scroller scroll from current position when your element is clicked

And 150px is used to scroll for 150px downwards

answered Aug 20 '15 at 08:17

Yatin Khullar

1,580
1
12
26

2

The `+=` in your answer helped a lot with a problem I was having to a similar issue I had. – NetOperator Wibby Mar 22 '16 at 19:30
1

Damn, this += thing was all I needed ! (me JS newbie). You should be awarded a Nobel prize. – Mexicanoon Jan 31 '18 at 00:15
1

That `'+=150px'` is super slick and it doesn't sacrifice clarity for brevity. Love it! – Joshua Pinter Apr 07 '18 at 19:02
It may help to call a `.stop()` before `.animate()` to prevent two scroll animations run at the same time (this will cause a flicker effect) – Thomas Kekeisen May 04 '18 at 12:26
$('html, body').animate({scrollTop: '+=150px'}, 800); This is was all I needed! – Azmol Sep 29 '20 at 10:43

score 8 · Answer 3 · edited May 23 '17 at 12:34

8

You can do that using animate like in the following link:

http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery

If you want to do it using scrollTo plugin, then take a look the following:

How to scroll the window using JQuery $.scrollTo() function

edited May 23 '17 at 12:34

Community

1
1

answered Apr 17 '10 at 17:44

Mahesh Velaga

21,633
5
37
59

These both seem to be set increments from the top of the browser, not from the point at when you are currently viewing. – bcWeb Apr 19 '10 at 13:22

score 3 · Answer 4 · answered Apr 18 '10 at 03:45

3

You might be after something that the scrollTo plugin from Ariel Flesler does really well.

http://demos.flesler.com/jquery/scrollTo/

answered Apr 18 '10 at 03:45

JVDL

1,157
9
16

the **relative px** version of the **_scrollTo plugin_** mentioned here should do the trick perfectly. the **relative px(hash)** method will allow you to spec a dif **_left_** from **_top_** value. – Jeremy Oct 29 '15 at 22:18

score 1 · Answer 5 · answered Dec 11 '19 at 13:26

Pure js solution for newcomers or anyone else.

var scrollAmount = 150;
var element = document.getElementById("elem");

element.addEventListener("click", scrollPage);

function scrollPage() {
    var currentPositionOfPage = window.scrollY;
    window.scrollTo(0, currentPositionOfPage + scrollAmount);
}

score 0 · Answer 6 · answered Apr 28 '16 at 11:33

0

Updated version of HCD's solution which avoids conflict:

var y = $j(window).scrollTop(); 
$j("html, body").animate({ scrollTop: y + $j(window).height() }, 600);

answered Apr 28 '16 at 11:33

Pixelomo

6,373
4
47
57

jQuery: Scroll down page a set increment (in pixels) on click?

6 Answers6

Linked