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

Question

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

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

我目前使用的代码应该是 function 一次用于页面上的所有锚链接。

将不胜感激我能得到的任何帮助。 这是代码：

<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>

Answer 1

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

你可以尝试更换

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

和

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

Answer 2

您描述的问题是由Squarespace 中的 AJAX 加载引起的。 您可以在这个非常相似的问题的答案中查看可能的解决方案。 简而言之，您的选择是禁用 AJAX 或修改您的代码以便它可以使用它，这两者都在上述链接中提到。