按top按钮返回顶部

最新推荐文章于 2024-06-19 21:43:22 发布

王山而文武

最新推荐文章于 2024-06-19 21:43:22 发布

阅读量1k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/a11979/article/details/122310677

版权

1.首先确认返回顶部的按钮

<body>
***
<span id="top">↑</span>   //回到顶部按钮
</body>

2.一般将这个按钮定位在右下角，默认隐藏

<style>
    #top{
        width: 60px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        position: fixed;
        right: 40px;
        bottom:60px;
        display: none;  //隐藏按钮
    }
</style>

3.然后功能实现的具体方式

1.先获取id元素

2.监听窗口滚动的函数

3.获取窗口的滚动高度

4.设置滚动高度大于100的时候显示返回按钮，否则隐藏按钮

5.当点击了按钮网页的高度平滑的返回到顶部

<script>
    window.onload=function () {
        var top=document.getElementById("top");
 
        //1.监听窗口的滚动
        window.onscroll=function () {
            //获取窗口滚动高度
            scroll_top=document.documentElement.scrollTop;
            console.log(scroll_top);
 
            //显示与隐藏 高度大于100显示
            if(scroll_top>100){
                top.style.display="block";
            }else{
                top.style.display="";
            }
 
            //监听点击
            top.onclick=function () {
			window.scrollTo({ 
	    		top: 0, 
	    		behavior: "smooth"   //平滑的滚动
			});
 
            }
        }
    }
</script>

王山而文武

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
按top按钮返回顶部

1.首先确认返回顶部的按钮<body>***<span id="top">↑</span> //回到顶部按钮</body>2.一般将这个按钮定位在右下角，默认隐藏<style> #top{ width: 60px; height: 40px; text-align: center; line-height: 40px; position: fi
复制链接

扫一扫