CODEWITHSUNDEEP
jqueryhtmlcss
Steven_Harris_
Steven_Harris_

Reputation: 1121

jQuery scrollTo top of div on scroll or view

On a full screen site I am working on i'm using scrollTo with links which lets the user scroll horizontally to the relevant DIV.

The user can also scroll down the site using the mouse wheel.

My question is how can I use jQuery to automatically align the fullscreen div to the viewport so as when the user scrolls down the site they don't have to do it manually.

I'm not sure how to tackle this. Here is my JSFiddle.

There is a similar effect on this website, if you scroll down and leave the fullscreen div half off the screen it will automatically align the div to the screen.

Upvotes: 0

Views: 107

Answers (2)

dinodsaurus
dinodsaurus

Reputation: 5095

Ive made a simple script for one of my projects... It uses a plugin to find out if you are scrolling up or down and then calculates top position of an element that has the same class that you entered( in this case .height). U can find more info here jsFiddle

Upvotes: 1

nrausch
nrausch

Reputation: 172

That's pretty easy, I think.. ;) If user scrolls over 200 pixels, the rest will be scrolled automatically until reaching the target.

$(document).scroll(function(){
    if($(document).scrollTop() > 200){
        $('html, body').stop().animate({
            'scrollTop': $YOUR_TARGET_HERE.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    }
}

Upvotes: 0

Related Questions