techno blog

Very simply put, this volition business office similar a normal internal anchor link or named anchor link, but volition scroll to the specified goal instead of only jumping there. It’s a actually easy-to-implement together with awesome matter to add together to close whatever website. I’m going to outflow correct into it. The HTML All that is needed for this instance is an chemical cistron to click, together with an chemical cistron to scroll to. <a id="scroll">Click hither to scroll</a> <img src="images/cat.png" alt=" this volition business office similar a normal internal anchor link or named anchor link Create a scrolling anchor link alongside jQuery" /> I’ve decided to scroll to an picture of a random cat, withal I intend this would last most useful for something similar a tabular array of contents. The jQuery/Javascript We volition last using the click() event, animate effect, scrollTop() manipulation together with outset ...

Just updated this i time again in addition to added pushState in, in addition to hence that it keeps rail of the hash alter inwards modern browsers. If a user clicks away later on clicking your anchor link, it’ll conduct hold them dorsum to the anchor reach they were at instead of making them rescroll to that position. Alternative 2 HTML <a href="#target" class="scrollMe">Go to </a> <div id="target">Lorem Ipsum...</div> Jquery $('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 - xx }, 1000); furnish false; ...