如何使用滚动功能移动到特定部分?

Posted

技术标签:

【中文标题】如何使用滚动功能移动到特定部分?【英文标题】:How can I use scroll function in order to move to a particular section? 【发布时间】:2017-09-29 15:59:30 【问题描述】:

我刚刚在我自己的 WordPress 网站上添加了来自 this site 的代码。现在我注意到代码使它在我定位的部分添加了一个自动高度,以便它始终可以是全高。

js 看起来是这样的:

(function() 
  var delay = false;
    $('<a name="#A1">Tag #1.</a>,.home').insertBefore('.eluid6ccc1f08');
  $(document).on('mousewheel DOMMouseScroll', function(event) 
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function()delay = false,200)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('a');
    if(wd < 0) 
      for(var i = 0 ; i < a.length ; i++) 
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      
    
    else 
      for(var i = a.length-1 ; i >= 0 ; i--) 
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      
    
    $('html,body').animate(
      scrollTop: a[i].offsetTop
    );
  );
)();

如何在无需添加自动高度的情况下向下或向上滚动后立即转到特定部分?

一个不错的选择可能是锚标签,你可以see in my pen here,但不幸的是我无法访问网站的 html 来物理添加锚标签。

希望我说的有点道理。

【问题讨论】:

【参考方案1】:

如果您可以使用外部资源,我不久前创建了 JQuery 插件 pageScroller,它可以让您在容器的子项之间“自动滚动”。

如果你不能,你可以用 javascript 自己添加你的锚。 只需选择您的元素并为其添加一个 ID。 然后你就可以把它当做锚了。

【讨论】:

我之前尝试过使用锚标记和 jQuery 是的,结果是一样的。我会尽快尝试您的代码,因为我这里没有网站文件。

以上是关于如何使用滚动功能移动到特定部分?的主要内容,如果未能解决你的问题,请参考以下文章

如何通过平滑滚动重定向到不同页面上的特定 div

如何使用 Unity UI 滚动到 ScrollRect 中的特定元素?

如何在没有滚动行为的情况下转到特定部分/没有滚动行为的 scrollIntoView() 的任何替代方法?

如何使用href函数将光标移动到页面的特定部分

UICollectionView 滚动到特定部分

如何在 SwiftUI 中将滚动视图添加到屏幕的特定部分? [复制]