锚链接滚动动画仅在 Squarespace 上刷新（JQuery）后起作用答案

【问题标题】：Anchor link scroll animation only functions after refreshing (JQuery) on Squarespace锚链接滚动动画仅在 Squarespace 上刷新（JQuery）后起作用
【发布时间】：2019-10-31 00:48:01
【问题描述】：

我目前正在构建一个 Squarespace 网站，我想添加带有锚链接的滚动动画。

目前，单击锚链接将立即捕捉到页面的该部分。但是，一旦我刷新，它就会开始工作。这似乎只是 Chrome 上的一个问题，我不太确定如何解决它，但我非常怀疑任何访问我的页面的人都会费心刷新它。

我目前使用的代码应该同时适用于页面上的所有锚链接。

如果我能得到任何帮助，我将不胜感激。代码如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script>
 $(function() {
   $('a[href*=#]:not([href=#])').click(function() {
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
       var target = $(this.hash);
       target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
       if (target.length) {
         $('html,body').animate({
           scrollTop: target.offset().top
         }, 1000);
         return false;
       }
     }
   });
 });
 </script>

【问题讨论】：

标签： javascript jquery squarespace anchor-scroll

【解决方案1】：

如果没有链接很难分辨，但可能是 javascript 和标签上的内置 href 机制之间的竞争。

你可以试试替换

$('a[href*=#]:not([href=#])').click(function() {

与

$('a[href*=#]:not([href=#])').click(function(e) { e.preventDefault();

【讨论】：

【解决方案2】：

您描述的问题是由AJAX loading in Squarespace 引起的。您可以在this answer to a very similar question 查看可能的解决方案。简而言之，您的选择是禁用 AJAX 或修改您的代码以使其能够正常工作，上述链接中都提到了这两种方法。

【讨论】：