using jQuery tabs I ran into a problem where the #anchor links won’t work in any of the tab content (specially when using Ajax tab load). I had heard of jQuery having a cool scrolling effect to scroll down, up to jump between the #anchor links. Here is how you can add this cool effect on your page..
You have to first either create scroll.js script file with the given javascript code and include it to your html code or just embed it inline using <script> tags..
$(document).ready(function(){ $(".scroll").click(function(event){ //prevent the default action for the click event event.preventDefault(); //get the full url - like example/page_alias#test var full_url = this.href; //split the url by # and get the anchor target name - home in example/page_alias#test var parts = full_url.split("#"); var trgt = parts[1]; //get the top offset of the target anchor var target_offset = $("#"+trgt).offset(); var target_top = target_offset.top; //goto that anchor by setting the body scroll top to anchor top $('html, body').animate({scrollTop:target_top}, 500); }); }); |
create anchor links you want the scroll effect to initiate on click event. Add class=”scroll” on each link..
<a href="#anchor1" class="scroll">Link One</a> <a href="#anchor2" class="scroll">Link Two</a> <a href="#anchor3" class="scroll">Link Three</a> |
create span or divs or whatever container element you like with the respective ID you want to jump/scroll into.
<span id="anchor1">
Link One related stuff...
...
</span>
<span id="anchor2">
Link Two related stuff...
...
</span>
<span id="anchor3">
Link Three related stuff...
...
</span> |
and that’s it, we are done 
