Question

问题在于它在本地环境下运行良好。但是，当我将其发布到surge时，它无法正常工作。我同时为webpack和dev使用prod。

更新我再次发布了该网站。此解决方案有时无法正常工作。在Chrome Incognito中进行测试。有缓存问题吗？单击网站上的几个链接后，滚动到锚点即可开始正常工作。

我正在使用以下代码：

$("a[href^='#']").on('click', function(event) {

        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();

          var hash = this.hash;
          var header = $('.rd-navbar').height();

          $('html, body').animate({
            scrollTop: $(hash).offset().top - header
          }, 800, function(){

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        }
      });

如果锚点位于同一页面上，则平滑滚动效果很好。但是例如，我有一个页脚，链接为technology.html#security。在我的本地环境中，这很好。但是，当我单击发布版本上的相同链接时，它不会滚动到security上的technology.html部分。

我也在CSS以下使用：

html {
    scroll-behavior: smooth;
}    
section:before {
        height: 40px;
        content: "";
        display:block;
    }

如果我在本地刷新页面technology.html#security，它也可以正常工作并滚动到该部分。但未发布版本。

如何解决滚动以定位到生产环境中的其他页面的问题？

滚动到其他页面的锚点

0 个答案: