HoneyBadgerYTB HoneyBadgerYTB - 7 months ago 72
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

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)

WORKING DEMO

Comments