平滑滚动到另一个页面中的锚点答案

【问题标题】：Smooth Scrolling To An Anchor in Another Page平滑滚动到另一个页面中的锚点
【发布时间】：2022-11-13 18:45:11
【问题描述】：

我已经想出了如何从链接平滑滚动到锚点，但它在同一页面内工作。

例如，如果我在主页中，此链接将平滑滚动：mysite.com/#section

但是，如果我在 about 页面 (mysite.com/about) 中，指向主页 (mysite.com/#section) 的相同链接将不会平滑滚动，只是普通的默认值。

到目前为止我有这个：

jQuery('a').click(function(){
    jQuery('html, body').animate({
        scrollTop: jQuery( this.hash ).offset().top
    }, 500);
});

我的想法用完了，请帮忙

【问题讨论】：

阅读 window.location (developer.mozilla.org/en-US/docs/Web/API/Window/location) 然后在准备好的文档上运行你想要的任何代码。
我正在使用文档，但我似乎仍然无法实现 window.location，你能分享代码吗？这个问题似乎只在 Firefox 上

标签： jquery css

【解决方案1】：

您需要使用 CSS：Demo

html {
  scroll-behavior: smooth;
}

【讨论】：

详细地说，是的，您可以通过简单地创建指向另一个页面的链接（如 /mypage#section）来避免使用 JS，并使用此 CSS 代码来获得平滑的滚动行为。
@Skoua 在页面之间链接时它在 Firefox 中不起作用，只有在同一页面上滚动时，请考虑一下？
@karlosuccess Uuhh.. 它应该可以在 firefox 36.0 上运行？？最新的 firefox 版本是 100，所以这应该很奇怪。您是否推送了编辑后的 CSS 版本？见：impressivewebs.com/force-browser-newest-stylesheet
@Skoua 在 Firefox 中，当链接在同一页面中时，它可以很好地工作和滚动。但是，当链接来自不同的页面时，它只会执行默认的丑陋锚定。在任何其他浏览器中它都可以工作。我会继续检查并回来更新。谢谢

【解决方案2】：

如果有人正在寻找答案，这是对我有用的代码：

jQuery(document).ready(function() {

    // Scrolling for anchor links in within the same page
    jQuery('a[href*="#"]:not([href="#"])').click(function(){
        _hash = this.hash;
        _scroll_it( _hash );
    });

    // scrolling for anchor links coming from a different page
    var _hash = window.location.hash;
    if( _hash.length > 0 ){     
        window.scrollTo(0, 0);
        
        setTimeout( function() { 
            _scroll_it( _hash );
        }, 500 );       
    }
    
    function _scroll_it( _hash ){
        jQuery('html,body').animate({
            scrollTop: jQuery( _hash ).offset().top
        }, 500 );
    }

});

【讨论】：

【解决方案3】：

试试这个，检查 URL 中是否有 #section，然后滚动到目标。

if(window.location.hash != '' && window.location.hash != '#') {
  let target = window.location.hash;

  if(!$(target).length) {
    return;
  }
  
  $('html, body').animate({
    scrollTop: $(target).offset().top
  });
}

if(!$(target).length) 很重要，如果页面上没有具有正确 id 的 div，您可能会收到错误消息。

【讨论】：