Smooth scroll to top link

Here is simple solution for animated, smooth scoll to top link. To the top of page link that will go easy, in animated way to the top or to whatever part of webpage you want.

In head add this jQuery code:

[codesyntax lang=”javascript”]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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>

[/codesyntax]

Then on top of body, just after opened < body > or at the place where you want to target visitors, add this:

[codesyntax lang=”html4strict”]

<a name="top"></a>

[/codesyntax]

And finally, at bottom of your page add “to the top” link:

[codesyntax lang=”html4strict”]

<a href="#top">to the top</a>

[/codesyntax]

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

62 + = 70