0

I'm currently building a Squarespace website, and I wanted to add scroll animation with anchor links.

Currently, clicking an anchor link will just immediately snap to that part of the page. Once I refresh, however, it starts working. This seems to only be an issue on Chrome, and I'm not too sure how to fix it, but I highly doubt anyone visiting my page will bother refreshing it.

I'm currently using a code that's supposed to function for all anchor links on the page at once.

Would appreciate any help I can get. Here's the code:

<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>
confusedllama
  • 1

2 Answers2

1

hard to tell without a link, but could be a race between javascript and inbuilt href mechanism on a tag.

you could try replacing

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

with

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

kajgod
  • 11
  • 3
0

The issue you describe is caused by AJAX loading in Squarespace. You can view possible solutions at this answer to a very similar question. Simply put, your options are to disable AJAX or modify your code so that it will work with it, both of which are mentioned at the aforementioned links.

Brandon
  • 3,572
  • 2
  • 12
  • 27