jquery - 鼠标滚动到 anchor

Question

第一个问题，希望大家帮忙!我更像是一个艺术人而不是一个编码员，所以我完全迷失在这里。

所以!我想做的是这个。

我正在设置一个页面，其中包含一个高度为 500% 的 div。它包含 5 个高度均为 20% 的 div，这为我提供了 5 个适合任何屏幕大小的 div。这是 jFiddle 上的示例:(http://jsfiddle.net/NwUvV/3/)

但是。

我需要的是让我的鼠标滚轮在用户滚动时完美地滚动到每个 div。例如，用户滚动鼠标滚轮，页面移动到 div #2(无论是 anchor 还是 ID，都可以)。我不希望人们能够在屏幕上显示一半的 div 1 和一半的 div 2。这太丑陋了。

这是一个站点示例: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

看看如何使用鼠标滚轮完美地将您带到下一个 div？它看起来像是锁定在一个 anchor 上并平滑地滚动到它，不是吗？

你们有机会帮忙吗？

提前致谢!

杰夫

Answer 1

给你伙计!在此处查看示例 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);