How to use js to achieve Anchor scrolling effect in HTML Web Page Design

This article mainly introduces how to use js to achieve anchor scrolling effect in HTML web page design, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

The details are as follows:

Js anchor scrolling effect ul > li {float: left;margin: 10px;} .clearfix: after {display:block;clear:both;content: "; visibility:hidden;height:0} .clearfix {zoom:1} .step {width:80%;height:1300px;border:10pxsolidred;margin:0auto } # step1#step2#step3step1step2step3// page anchor scrolls js$ ('a [href*=#], area [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) {vartargetOffset=$target.offset.top $('html,body'). Animate ({scrollTop: targetOffset}, 1000); returnfalse;}}); / / Page Anchor Scroll js ends Thank you for reading this article carefully. I hope the article "how to use js to achieve Anchor Scroll effect in HTML Web Design" shared by the editor will be helpful to you. At the same time, I hope you will support us, pay attention to the industry information channel, and more related knowledge is waiting for you to learn!