自动滚动到最近的 div答案

【问题标题】：Automaticly scrollTo closest div自动滚动到最近的 div
【发布时间】：2013-02-25 15:58:13
【问题描述】：

我正在构建一个带有 4 个 div 的单页 ScrollTo 网站。这些 div 代表我的页面。

Home -> My work -> About me -> Contact

宽度和高度由一小段 javascript 定义，它在 bodyload 或 resize 时读取用户的屏幕分辨率。所以 div 始终是用户屏幕的内部宽度和高度。

function resize() {

    document.getElementById("home").style.height = viewportheight+"px";
    document.getElementById("work").style.height = viewportheight+"px";
    document.getElementById("about").style.height = viewportheight+"px";
    document.getElementById("contact").style.height = viewportheight+"px";

我想要完成的是，一旦用户滚动（比如说向下或向上 100 像素），窗口就会自动捕捉到最近的 div 的顶部。

类似：

onScroll("100px") up or down { scrollTo("closest #div") };

【问题讨论】：

标签： javascript jquery scroll scrollto

【解决方案1】：

您可以从这里开始的方法是：

//OnScroll:
$(window).scroll(function(){
   //Get current scoll position:
   var iSrollT = $(document).scrollTop();
   //Get the position of your element:
   var iOffT = $('#home').offset().top;
 });

//Set scroll top using an animation:
$('html, body').animate({       
   scrollTop: iOffT
}, 300);

但是您将不得不实施更多...例如防止 scoll 位置总是捕捉到下一个 div 并且不再可能进行 scolling。

【讨论】：

【解决方案2】：

var STELLARJS = {
init: function() {
    var self = this;
    $(function(){
        self.$sections = $('#landing_page, #work, #about, #contact').each(function(index){
            $(this).data('sectionIndex', index);
        });

        self.handleEvents();

    });
},
handleEvents: function() {
    var self = this,
        //Debounce function from Underscore.js
        debounce = function(func, wait) {
            var timeout;
            return function() {
                var context = this, args = arguments;
                var later = function() {
                    timeout = null;
                    func.apply(context, args);
                };
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
            }
        },
        handleScroll = function() {
            var scrollTop = $(window).scrollTop(),
                sectionIndex = Math.round((scrollTop) / self.$sections.first().outerHeight()),
                $activeSection = self.$sections.eq(sectionIndex);

            if ($activeSection.length === 0) {
                $activeSection = self.$sections.last();
            }

            if ($activeSection.length === 0) return;

            $(window).unbind('scroll.stellarsite');

            if (scrollTop === 0) {
                $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
            } else {
                $('html,body').animate({
                    scrollTop: $activeSection.offset().top
                }, 600, 'easeInOutExpo', function() {
                    setTimeout(function(){
                        $(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
                    }, 10);
                });
            }

            $(window).bind('mousewheel', function(){
                $('html,body').stop(true, true);
            });

            $(document).bind('keydown', function(e){
                var key = e.which;

                if (key === 37 || key === 39) {
                    $('html,body').stop(true, true);
                }
            });
        };

    if (window.location.href.indexOf('#show-offset-parents-default') === -1) {
        $(window).bind('scroll.stellarsite', debounce(handleScroll, 500));
    }
} });

【讨论】：