如何利用JS实现点击标签完成网页滑动到相应位置

最新推荐文章于 2023-04-20 14:55:08 发布

JunerFan

最新推荐文章于 2023-04-20 14:55:08 发布

阅读量1.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43918109/article/details/105578391

版权

本文介绍了如何利用JavaScript实现点击页面上的a标签时，页面自动滑动到相应位置。不仅阐述了简易的匀速滑动方法，还提及了通过tween.js库来实现更复杂的非匀速滑动效果。

摘要由CSDN通过智能技术生成

如何利用JS实现点击标签完成网页滑动到相应位置

找到需要点击的所有a标签，放到一个类里面，这是简易版的滑动，匀速滑动。

<script>
    let aTags= document.querySelectorAll('nav.menu > ul>li>a'); //讲所有a标签放到aTags类中
    for (let i=0; i<aTags.length; i++){
   
        aTags[i].onclick=function (x) {
   
            x.preventDefault();
            let a = x.currentTarget; //返回其监听器触发事件的节点
            let href = a.getAttribute('href');//'#siteAbot'得到网址
            let element= document.querySelector(href);
            let top= element.offsetTop; //得到目标元素不随鼠标滑动而变化的