CODEWITHSUNDEEP
javascriptjqueryanimationscrolljquery-animate
vuffer
vuffer

Reputation: 166

How to scroll down a certain distance on click jQuery

I'm trying to scroll the page down when I click a button with an animation to a certain distance, currently, I'm able to scroll down to a certain element but this is not what I want, I want to scroll down to a certain distance in pixels.

I've tried lots of variation but they don't seem to work in my case, at least not how I want them to.

Anyway, here's the code: 

$(document).ready(function(){
   $('.next_section').click(function(){
        $('html, body').animate({
            scrollTop: $('.img_div').offset().top
        }, 1000);
   }); 
}

Upvotes: 3

Views: 10658

Answers (1)

Harry
Harry

Reputation: 1263

to a certain distance

I assume distance in pixels?

This scrolls down 150px:

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

@therealbischero (thanks!) mentions in a comment the missing part of my answer, how to make it smoothly scrolling:

var y = $(window).scrollTop();
 $('html, body').animate({ scrollTop: y + 150 })

Upvotes: 11

Related Questions