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

jQuery scroll to next element via up/down buttons - how to add handling for manual scrolling that would otherwise confuse this?

本文关键字：滚动 处理 添加 这一点 按钮 jQuery 元素 下一个      更新时间：2023-09-26

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

我希望按钮在单击时能够顺利滚动到页面的下一部分(下一个包含div(。

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

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

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

到目前为止，我使用的代码在这里：

$('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');
    });
  } 
});

我用精彩的 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 bind 事件，在页面滚动(任何类型的，通过我的按钮、手动或通过鼠标滚轮(上，插件就会运行。 我首先在页面项数组中搜索与 $(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 animate 调用滚动到通过 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);
});
相关文章：