jquery simple implementation of smooth scrolling of anchor links

Source: Internet
Author: User
Tags hash

In peacetime projects, we often need some special effects links, if the effect of further strengthening, we can click the anchor link to smooth scrolling to the anchor point, below to explain how to use jquery to achieve.

Generally use the anchor point to jump to the page specified position, will immediately jump to the specified position, but sometimes we want to smooth transition to the specified location, then you can use jquery simple to achieve this effect:

For example, here we will jump to the specified location with ID content by clicking on the tag.



And then, where we want to set the ID to Conte NT content block, here with a div to simulate an article not like the article. It's a good idea to put this div in the back position, so it's obvious that if you just test the effect, you can put a lot of

tags in front of it in a simple, rough way.


1 2 3 4 5 6 7 8 9 <div id= "Content" >

Finally uses jquery to achieve smooth transitions:


$ (' #turnToContent '). Click (function () {$ (' html, Body '). ANimate ({scrolltop: $ $.attr (this, ' href ')). Offset (). Top}, 500; return false; });

It's done!

Let's continue to improve,


1 2 3 4 5 6 7 8 9 a $ (function () {$ (' a[href*=#],area[href*=#] '). Click (function () {if (Location.pathname.replace (/^//, ') = = This.pathname.replace (/^//, ') && location.hostname = = this.hostname) {var $target = $ (this.hash); $target = $ta Rget.length && $target | | $ (' [name= ' + this.hash.slice (1) + '] '); if ($target. length) {var targetoffset = $target. Offset (). Top; $ (' html,body '). Animate ({Scrolltop:targetoffset}, 1000); return false; } } });

The benefit of improved code is to click the Anchor link to smooth scroll to the anchor point, and the browser URL suffix does not have the word anchor, the process of using the basic need not modify the above code to achieve.

The above is the entire contents of this article, I hope you can enjoy.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.