CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
user2735049
user2735049

Reputation: 23

How do I use javascript to animate a scroll from a link to an anchor?

http://www.littlestonegroup.org

If you click "Learn" i want it to scroll down to next link. I can have it snap to using anchor links, but I want to have the scroll effect. I have looked at a number of tutorials, but I'm not sure how to install javascript nor implemented a script suggested by a tutorial.

Thanks in advance, I really appreciate your help!

Upvotes: 0

Views: 53

Answers (1)

Senju
Senju

Reputation: 1035

I found this smooth scroll function over at CSS-Tricks:

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

Here is the function in action JSFiddle

You can add it right before the closing body tag by wrapping the above function in:

<script type="text/javascript">

    function here

</script>

Upvotes: 1

Related Questions