0

我目前正在使用平滑滚动和 ID/锚标记的组合来滚动到我网站上的内容。下面的代码获取 DOM 中下一个“部分”的 ID，并将其 ID 添加为“查看下一个部分”href，因此一旦单击它，它将滚动到该 div 的顶部。然后，它会迭代，每次都用下一个 ID 更新 href 等，直到看到最后一个部分并滚动回顶部。很简单。

唯一的问题是“部分”是全屏图像，因此当它滚动到下一部分的顶部时，如果您调整浏览器的大小，该部分的顶部位置（我们滚动到的位置）已经移动，并且意味着位置丢失了。

我创建了一个 JSFiddle。单击箭头访问下一部分然后调整窗口大小后，您可以看到这种情况发生：http: //jsfiddle.net/WFQ9t/3/

我希望始终保持此顶部位置固定，因此即使您调整浏览器大小，滚动位置也会更新以反映这一点。

在此先感谢，

var firstSectionID = $('body .each-section').eq(1).attr('id');
$('.next-section').attr('href', '#' + firstSectionID);

var i = 1;
$('.next-section').click(function() {

    var nextSectionID = $('body .each-section').eq(i).attr('id');
    i++;
    $('.next-section').attr('href', '#' + nextSectionID);

    var numberOfSections = $('body .each-section').length;
    var lastSectionID = $('body .each-section').eq(numberOfSections).attr('id');

    if ($('.next-section').attr('href') == '#' + lastSectionID ) { 
        $('.next-section').attr('href', '#introduction');
        i = 1;
    }

});
4

2 回答 2

1

好的，请查看这个小提琴：http: //jsfiddle.net/WFQ9t/9/

我做的几件事是：

  1. 制作了一些全局变量来处理屏幕编号（您所在的屏幕以及初始窗口高度。您将在屏幕加载时以及单击.next-session箭头时使用它。

    var initWinHeight = $(window).height();
var numSection = 0;

  2. 然后我把这些变量扔到你的resizeContent()函数中

    resizeContent(initWinHeight, numSection)

    这样它就可以在加载和调整大小时工作

  3. 我在body需要的地方进行了移动，以适应 div 的移动（我仍然不明白当常规动画发生时 div 正在移动）。

    $('body').css({
    top: (((windowHeight - initWinHeight)*numSection)*-1) + "px"
});

  4. body然后在您的点击功能中，我将 1 添加到部分编号，重置初始窗口高度，然后还将top:0. 您已经将下一部分放在页面顶部的正常动画。

    numSection++;
initWinHeight = $(window).height();
$('body').css({top:"0px"}, 1000);

  5. 最后，当您到达最后一页时，我重置了numSections计数器（您可能必须将此设置为 0 而不是 1）

    numSection = 0;

小提琴将所有这些都放在正确的位置，这些只是我更改代码所采取的步骤。

于 2014-01-29T21:38:51.247 回答
0

这是我找到的解决方案，但此时我不使用锚链接，我使用类

这是我的 HTML 代码：

<section class="section">
    Section 1
</section>

<section class="section">
    Section 2
</section>

<section class="section">
    Section 3
</section>

<section class="section">
    Section 4
</section>

这是我的 jQuery/Javascript 代码，我实际上使用了一种非常简单的方法：

    $('.section').first().addClass('active');

/* handle the mousewheel event together with 
 DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
    e.preventDefault();//prevent the default mousewheel scrolling
    var active = $('.section.active');
    //get the delta to determine the mousewheel scrol UP and DOWN
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;

    //if the delta value is negative, the user is scrolling down
    if (delta < 0) {
        next = active.next();
        //check if the next section exist and animate the anchoring
        if (next.hasClass('section')) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: next.offset().top
                }, 800);

                next.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 200);
        }

    } else {
        prev = active.prev();

        if (prev.length) {
            var timer = setTimeout(function () {
                $('body, html').animate({
                    scrollTop: prev.offset().top
                }, 800);

                prev.addClass('active')
                    .siblings().removeClass('active');

                clearTimeout(timer);
            }, 200);
        }

    }
});


/*THE SIMPLE SOLUTION*/
$(window).resize(function(){
    var active = $('.section.active')

     $('body, html').animate({
        scrollTop: active.offset().top
    }, 10);
});
于 2016-01-08T21:55:44.950 回答