Smooth transition FOR ANCHOR HTML

As you know, by clicking on the link anchor throws us to the part of the page from which the link is connected. The transition itself is instantaneous and this nuance we'll fix that.

In order to realize a smooth transition after clicking on the link, we will need to write a small script that will track when you press, it emerged at a block refers anchor and smoothly scroll to the desired location. But let us all in order 🙂
 

DemoIskhodniki

1. The menu structure with anchor links

So that when you click the link, we move to a specific unit, a paragraph, it is necessary to attribute href register the ID name of the unit to which we want to refer to, for example:
we have a block

... , the internal link this unit will be as follows:
Thus all references refer to the ID units.
Here is the menu code of the demo examples:


Each link refers to the corresponding block:

...
...
...
...

2. The script is a smooth transition to the desired block

So we need to handle the press on the links in our menu, cancel the default behavior, to find out which block refers anchor and animated transitions.

 
$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		// override the normal processing clicking the link
		event.preventDefault();

		// we take away from the sides of the ID attribute href
		var id  = $(this).attr('href'),

		// find the height from the top-up unit which is referred to anchor
			top = $(id).offset().top;
		
		// animate the transition to the distance - top for 1500 ms
		$('body,html').animate({scrollTop: top}, 1500);
	});
});

 

Read more:   speed up the loading DESKTOP WINDOWS XP

DemoIskhodniki

Each line of the script, I said, if you have any questions write in the comments to the post - help 😉

Smooth scrolling to anchors JAVASCRIPT


Read in other languages

 BelorussianEnglish Deutsch Spanish French Italian Portuguese Turkish Arab Ukrainian Swedish Hungarian Bulgarian Estonian Chinese (Simplified) Vietnamese Romanian Thai Slovenian Slovak Serbian Malay Norwegian Latvian Lithuanian Korean Japanese Indonesian Hindi Hebrew Finnish Greek Dutch Czech Danish Croatian Chinese (Traditional) Philippine Urdu Azeybardzhansky ArmenianPolish Bengal Georgian Kazakh Catalan Mongolski Russian Tadzhitsky Tamilʹskij telugu Uzbetsky

Add a comment

Your e-mail will not be published. Required fields are marked *