How to add Animated Scroll? :O

Highlighted
Excursionist
38 0 4

Hey all!

How do you make an animated scroll for a page? For example, let's say my page has two sections: About, and FAQ. If I click a link on this page that says "FAQ", I want the page to animate the scroll to FAQ, rather than immediately jumping there.

Any help at all would be greatly appreciated (:

0 Likes
Shopify Partner
157 0 33

Some jQuery can do that for you :D

$(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;
      }
    }
  });
});

Explanation & demo of code in action.

1 Like
Excursionist
38 0 4

Thanks for the reply Cameron! Just wondering, which file do I insert that in?

0 Likes
Shopify Expert
9965 84 1464

You'd add it into your main JavaScript file.

Since you've not given any info on the theme in place, it's hard to tell you where it should go. If you post the theme name, or give a link to the store someone will be able to give you some more info.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Excursionist
38 0 4

Oops, I must have forgotten to include that. I'm using the Brooklyn theme. 

Currently, I have a long page with three sections; each of those sections has a link on the top of the page which the user can click, and the page will jump to that section. I want to add animated scroll to these links rather than having a sudden page jump!

0 Likes