CODEWITHSUNDEEP
jquerycssmousewheel
Jeff Monk
Jeff Monk

Reputation: 113

Mouse scroll to anchors

First question here, hopefully you guys can help! Im far more of an art guy than a coder, so Im completely lost here.

So! What I want to do is this.

I am setting up a page with a single div thats 500% tall. It contains 5 divs that are all 20% tall, giving me 5 divs that are perfectly sized to any screen. Here is an example on jFiddle: (http://jsfiddle.net/NwUvV/3/)

BUT.

What I need is for my mouse wheel to scroll perfectly to each div as the user scrolls. As in, user scrolls mouse wheel, page moves to div #2 (be it an anchor or ID, whatever). What I don't want is for people to be able to have half of div 1 on the screen, and half of div 2. Thats just ugly.

This is an example of a site here: http://www.beoplay.com/Products/BeoplayA9?utm_source=bang-olufsen.com&utm_medium=referral&utm_campaign=Bang-Olufsen.com%2BProduct%2BPage&utm_term=EXPERIENCE%2BA9&utm_content=BeoPlay%2BA9%2B%3A%2BAll#at-a-glance

See how on using your mouse wheel it brings you perfectly to the next div? It looks like its locking onto an anchor and scrolling over smoothly to it, no?

Any chance you guys can help out?

Thanks much in advance!

Jeff

Upvotes: 0

Views: 5453

Answers (3)

Curt Husting
Curt Husting

Reputation: 11

not sure if you ended up getting this figured out or not, but I figured I would throw an example out there...

Ultimately we need to intercept the scroll event and determine which way the user is scrolling.

Once we know which direction, we can just use a stored variable of the active index, and animate the body based on the offset of the active element.

// setup active index variable
var index = 0;
//  we will use this to determine scroll direction
var lastTop = 0;

$( window ).on( 'scroll', function( ev ) {
    // get the current top offset
    top = $( window ).scrollTop();
    // Determine direction
    if ( top > lastTop ) { 
        // down
        index++
        // handle animation
    } else {
        // up
        index--
        // handle animation
    }
    // update lastTop for next interaction
    lastTop = top;

}

The code itself should be commented enough to understand what is happening, but if you need any further assistance or have any questions let me know.

See full example here http://jsfiddle.net/NwUvV/71/

Could use some cleaning up to help with the transitions (possibly css3 with fallback), etc. but hopefully it gets the point across and you can take it from there.

The included code will account for variable sized elements, check the comment in the css if desired.

Upvotes: 1

VIDesignz
VIDesignz

Reputation: 4783

Here you go man! Check out the example here EXAMPLE

var tempScrollTop = 0;
var currentScrollTop = 0;
var scrollHeight = $(window).height();
var newHeight = 0;


function scrollIt() {

$(window).off('scroll', scrollIt);

    currentScrollTop = $(window).scrollTop();


    if (tempScrollTop < currentScrollTop) {
       newHeight = newHeight + scrollHeight;
       $('html').animate({scrollTop: newHeight}, 500, function(){
             var setScroll = setTimeout(function(){
                console.log('Animation Complete');
                tempScrollTop = $(window).scrollTop();
                $(window).on('scroll', scrollIt);
            }, 10);
        }); 

    } else if (tempScrollTop > currentScrollTop){
       newHeight = newHeight - scrollHeight;
       $('html').animate({scrollTop: newHeight}, 500, function(){
             var setScroll = setTimeout(function(){
                console.log('Animation Complete');
                tempScrollTop = $(window).scrollTop();
                $(window).on('scroll', scrollIt);
            }, 10);
        }); 
    }


}

$(window).on('scroll', scrollIt);

Upvotes: 1

MyStream
MyStream

Reputation: 2553

Using the mousewheel plugin for jQuery, you can detect the direction of scroll, set a variable when the scroll starts and return false; When the scrolling is finished, you can trigger your own animation to scroll the window in the direction of the scroll event detected.

Can you set up a fiddle, as requested by VIDesignz so that a version can be created with the above mentioned example, perhaps?

Upvotes: 0

Related Questions