189 8069 5689

如何通过JS/CSS实现网页返回顶部效果

这篇文章给大家分享的是有关如何通过JS/CSS实现网页返回顶部效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联从2013年创立,先为赞皇等服务建站,赞皇等地企业,进行企业商务咨询服务。为赞皇企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

CSS 按钮样式:

#myBtn {

display: none; /* 默认隐藏 */

position: fixed;

bottom: 20px;

right: 30px;

z-index: 99;

border: none;

outline: none;

background-color: red; /* 设置背景颜色,你可以设置自己想要的颜色或图片 */

color: white; /* 文本颜色 */

cursor: pointer;

padding: 15px;

border-radius: 10px; /* 圆角 */

}

#myBtn:hover {

background-color: #555;

}

JS 代码:

// 当网页向下滑动 20px 出现"返回顶部" 按钮

window.onscroll = function() {scrollFunction()};

function scrollFunction() {console.log(121);

if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

document.getElementById("myBtn").style.display = "block";

} else {

document.getElementById("myBtn").style.display = "none";

}

}

// 点击按钮,返回顶部

function topFunction() {

document.body.scrollTop = 0;

document.documentElement.scrollTop = 0;

}

感谢各位的阅读!关于“如何通过JS/CSS实现网页返回顶部效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网页标题:如何通过JS/CSS实现网页返回顶部效果
文章地址:http://jkwzsj.com/article/gehdsj.html

其他资讯