Question

我正在尝试实现两个静态按钮，用于在一个相当深的内容页面上大约10个包含div标签之间向上或向下导航。

我想让按钮在点击时平滑地滚动到页面的下一部分（下一个包含div）。

此解决方案的问题在于，如果您使用浏览器滚动条或鼠标滚轮手动向上和向下滚动页面，则代码的逻辑不会知道这一点，当您下次单击下一个/上一个滚动时与您看到的可视区域实际上并不相关的地方，完全破坏了用户体验。

您可以在此演示中对此进行测试：http://jsfiddle.net/aVJBY/。如果单击“下一步”，则一旦有效。现在向下滚动到内容底部附近，然后单击PREV。从理论上讲，页面应该从页面底部向后退一步。相反，它会返回到页面顶部。

也许我只需要废弃这些代码并使用一些外部库，这很好，但我找不到合适的东西。任何人都知道如何让我的代码解决这个问题？

我目前使用的代码在这里：

$('div.section').first();
$('a.display').on('click', function(e) {
e.preventDefault();

  var t = $(this).text(),
  that = $(this);

if (t === 'next' && $('.current').next('div.section').length > 0) {
    var $next = $('.current').next('.section');
    var top = $next.offset().top;

    $('.current').removeClass('current');

    $('body').animate({
      scrollTop: top     
    }, function () {
           $next.addClass('current');
    });
 } else if (t === 'prev' && $('.current').prev('div.section').length > 0) {
    var $prev = $('.current').prev('.section');
    var top = $prev.offset().top;

    $('.current').removeClass('current');

    $('body').animate({
      scrollTop: top     
    }, function () {
           $prev.addClass('current');
    });
  } 
});

Answer 1

我用精彩的jQuery inview插件解决了这个问题 - https://github.com/protonet/jquery.inview概述了我所做的事情......

我首先设置一些变量，pageItems数组包含我需要监视的所有div ...

var posNext=0;
var posPrev=0;
var pageItems = ["pageone", "pagetwo", "pagethree", "pagefour", "pagefive"];

然后我准备好了文件中的以下内容。感谢inview插件和jQuery绑定事件，在页面滚动（任何类型，通过我的按钮，手动或通过鼠标滚轮）插件运行。我首先搜索页面项目数组，以匹配$（this）.attr（“id”）值返回的内容。然后我根据视图中的当前div调整posNext / posPrev变量。

$(document).ready(function (){
  $(".divclass").bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
    if (isInView) {
        matchPos = pageItems.indexOf($(this).attr("id"));

        // Determine prev/next positions now we have an index.  The position values used in click events later
        if ( (matchPos+1)==pageItems.length ){
            posNext=matchPos;
            posPrev=matchPos-1;
        }else if (matchPos==0){
            posNext=matchPos+1;
            posPrev=0;
        }else{
            posNext=matchPos+1;
            posPrev=matchPos-1;
        }

    } else {
        // dont update index
    }
  });
});

最后也在document.ready中，我已经绑定了点击我在屏幕上的按钮的所有时间点击。这些使用jQuery动画调用滚动到通过posNext / posPrev中的数组索引值指定的div id值。

$(".down-button").click(function(e){
    event.preventDefault();
    $('html, body').stop().animate({
        scrollTop: $("#"+pageItems[posNext]).offset().top
    }, 500);
});
$(".up-button").click(function(e){
    event.preventDefault();
    $('html, body').stop().animate({
        scrollTop: $("#"+pageItems[posPrev]).offset().top
    }, 500);
});

jQuery通过向上/向下按钮滚动到下一个元素 - 如何添加手动滚动的处理，否则会混淆这个？

1 个答案: