HoneyBadgerYTB HoneyBadgerYTB - 1 year ago 228
HTML Question

jQuery Horizontal Scroll to DIV on Click

I have a parallax setup so the user can scroll down when they are on the landing of the site. Once they scroll down, they can then scroll across to different pages.

I have tried using the jQuery code:

$("#scrollTo").click(function() {
$('html, body').animate({
scrollTop: $("#page2").offset().top
}, 2000);


I want to make it so when the user clicks the button it scrolls across or horizontally to the second page "view2". However the system does not seem to work.

Here is a fiddle: https://jsfiddle.net/qm7s60ud/1/

Answer Source

The animate should be on .wrapper class since it is the element that has an overflow.

.wrapper { 
    height: 100%;
    background-color: gray;
    overflow: auto; //overflow that causes the div to have scroll bar

And instead of scrollTop and .offset().top, (Because this is for Vertical)

It should be scrollLeft and .offset().left .. (This is for Horizontal)


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download