欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS实例 >

JavaScript 返回顶部实例

 

为大家介绍如何通过 JS/CSS 实现网页返回顶部效果。

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;

}

JavaScript 返回顶部实例

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s50873.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-09-20 12:21 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。