JQuery smooth scroll to anchor?

Question

Is there a way to scroll down the anchor link using jQuery?

Like:

$(document).ready(function(){ $("#gotomyanchor").click(function(){ $.scrollSmoothTo($("#myanchor")); }); }); 

?

Answer 1

Here is how I do it:

  var hashTagActive = ""; $(".scroll").on("click touchstart" , function (event) { if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll. event.preventDefault(); //calculate destination place var dest = 0; if ($(this.hash).offset().top > $(document).height() - $(window).height()) { dest = $(document).height() - $(window).height(); } else { dest = $(this.hash).offset().top; } //go to destination $('html,body').animate({ scrollTop: dest }, 2000, 'swing'); hashTagActive = this.hash; } }); 

Then you just need to create your anchor as follows:

 <a class="scroll" href="#destination1">Destination 1</a> 

You can see it on my website .
The demo is also available here: http://jsfiddle.net/YtJcL/

Answer 2

I would use a simple piece of code from CSS-Tricks.com:

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

Source : http://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 3

The best solution I've seen so far: jQuery: smooth scrolling of internal anchor links

HTML:

 <a href="#comments" class="scroll">Scroll to comments</a> 

Script:

 jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); }); 

Answer 4

jQuery.scrollTo will do everything you need and more!

You can pass all kinds of things:

• Raw number
• String ('44 ',' 100px ',' + = 30px ', etc.)
• DOM element (logically, a child of a scrollable element)
• The selector that will apply to the scrollable item
• The string 'max' to scroll to the end.
• A string specifying the percentage of scroll to that part of the container (fe: 50% goes to * in the middle).
• A hash {top: x, left: y}, x and y can be any type of number / string, as described above.

Answer 5

Here is the code I used to quickly bind jQuery scroll to all anchor links:

 // Smooth scroll $('a[href*=#]').click(function () { var hash = $(this).attr('href'); hash = hash.slice(hash.indexOf('#') + 1); $.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500); window.location.hash = '#' + hash; return false; }); 

Answer 6

I need a version that worked for <a href="#my-id"> and <a href="/page#my-id">

 <script> $('a[href*=#]:not([href=#])').on('click', function (event) { event.preventDefault(); var element = $(this.hash); $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing'); }); </script> 

Answer 7

Try it. This is the code from CSS tricks that I modified, it is quite straightforward and performs horizontal and vertical scrolling. Requires jQuery. Here is the demon

 $(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-10, scrollLeft:target.offset().left-10 }, 1000); return false; } } }); }); 

Answer 8

Using hanoo script I created a jQuery function:

 $.fn.scrollIntoView = function(duration, easing) { var dest = 0; if (this.offset().top > $(document).height() - $(window).height()) { dest = $(document).height() - $(window).height(); } else { dest = this.offset().top; } $('html,body').animate({ scrollTop: dest }, duration, easing); return this; }; 

using:

 $('#myelement').scrollIntoView(); 

The default value for duration and attenuation is 400 ms and swing.

Answer 9

I used the following on my site:

 $(document).ready(function(){ $('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 1200, 'swing', function () { window.location.hash = target; }); }); 

});

You can change the scroll speed by changing the default "1200", it works quite well on most browsers.

after putting the code between the <head> </head> your page, you will need to create an internal link in the <body> :

 <a href="#home">Go to Home</a> 

Hope this helps!

Ps: Do not forget to call:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Answer 10

I used the Smooth Scroll plugin, http://plugins.jquery.com/smooth-scroll/ . With this plugin, all you need to enable is a link to jQuery and the plugin code:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="javascript/smoothscroll.js"></script> 

(links must have a smoothScroll class to work).

Another feature of Smooth Scroll is that the name ancor does not appear in the URL!

Answer 11

work

 $('a[href*=#]').each(function () { $(this).attr('href', $(this).attr('href').replace('#', '#_')); $(this).on( "click", function() { var hashname = $(this).attr('href').replace('#_', ''); if($(this).attr('href') == "#_") { $('html, body').animate({ scrollTop: 0 }, 300); } else { var target = $('a[name="' + hashname + '"], #' + hashname), targetOffset = target.offset().top; if(targetOffset >= 1) { $('html, body').animate({ scrollTop: targetOffset-60 }, 300); } } }); }); 

Answer 12

I don't like adding classes with naming functions to my code, so instead I put this together. If I stopped using smooth scrolling, I would feel good to go through my code and remove all class = "scroll" elements. Using this method, I can comment on 5 lines of JS and all site updates. :)

 <a href="/about">Smooth</a><!-- will never trigger the function --> <a href="#contact">Smooth</a><!-- but he will --> ... ... <div id="contact">...</div> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> // Smooth scrolling to element IDs $('a[href^=#]:not([href=#])').on('click', function () { var element = $($(this).attr('href')); $('html,body').animate({ scrollTop: element.offset().top },'normal', 'swing'); return false; }); </script> 

Requirements :
1. <a> elements must have an href attribute starting with # and more than just #
2. An element on the page with the corresponding id attribute

What does he do:
1. The function uses the href value to create the anchorID object
- In the example, this is $('#contact') , /about starts with /
2. HTML and BODY are animated to the top offset anchorID
- speed = 'normal' ("fast", "slow", milliseconds)

- easing = 'swing' ('linear' etc. google easing)
3. return false - it does not allow the browser to display the hash in the URL
- the script works without it, but it is not so smooth.