Question

好吧，伙计们，这对我来说是一个艰难的......

我正在构建一个包含4个div的单页ScrollTo网站。这些div代表我的页面
首页 - ＆gt;我的工作 - ＆gt;关于我 - ＆gt;联系

宽度和高度由一小段javascript定义，用于读取bodyload上的用户屏幕分辨率或调整大小。所以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";

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

类似的东西：

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

提前致谢。

编辑：找到答案！

有一个名为stelarjs的插件，它被修改为垂直滚动而不是水平滚动。得到了我正在寻找的效果：

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

Answer 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。

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

自动滚动到最近的div jQuery / Javascript

2 个答案: