Mouse scroll to anchors

Question

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

Wanna post the html? Create a Fiddle? http://www.jsfiddle.net — VIDesignz, Nov 25 '12 at 18:09
I have a fiddle setup here : [link}(http://jsfiddle.net/NwUvV/3/) but with no script whatsoever, since I have no idea how to even start this. Google has been useless. — Jeff Monk, Nov 26 '12 at 19:08
I have worked up a script for you Jeff. Let me know what you think! — VIDesignz, Nov 26 '12 at 21:55

VIDesignz · Answer 1 · 2012-11-26T22:02:15.253

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);

score 1 · Answer 2 · answered Dec 31 '13 at 16:37

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.

score 0 · Answer 3 · answered Nov 25 '12 at 18:17

0

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?

answered Nov 25 '12 at 18:17

MyStream

2,533
1
16
33

1

All the info I've found about detecting the direction of the scroll involves the page actually scrolling so you can't preventDefault (not return false) which means there is going to be some conflict that needs resolving to produce a smooth effect. – Popnoodles Nov 25 '12 at 18:53
Hi, I meant the scroll wheel event, not the actual scroll direction. Here's an example for stop detection: http://stackoverflow.com/questions/3515446/jquery-mousewheel-detecting-when-the-wheel-stops – MyStream Nov 25 '12 at 19:34
but you need to know in which direction it is being pushed. it would seem that's only possible by comparing the $(window).scrollTop() with what it was previously. – Popnoodles Nov 25 '12 at 20:00

Mouse scroll to anchors

3 Answers3