CSS实现返回网页顶部

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击返回置顶</title>
<style>
#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;
}
</style>
</head>
<body><!--<button οnclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>--><div style="background-color:black;color:white;padding:30px">向下滑动</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">该实例演示了如何实现网页返回顶部效果。</div></body>
<script>
var MyDiv =document.getElementById("body");
var bt =document.createElement("button");
bt.id="myBtn";
bt.title="回顶部";
bt.innerHTML = "返回顶部";
bt.onclick ="topFunction()";
pictureDiv.appendChild(bt); // 当网页向下滑动 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;
}
</script>
</html>

转载于:https://www.cnblogs.com/lucky1024/p/10999557.html

CSS实现返回网页顶部相关推荐

漂亮大气的html导航页面,jquery+css打造位于网页顶部漂亮黄色下拉导航
jquery+css打造位于网页顶部漂亮黄色下拉导航 - www.webdm.cn $(document).ready(function(){ $(".btn-slide").cl ...
如何通过HTML标记或JS代码实现跳转返回页面顶部
本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用JavaScript Scroll函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即 ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
BeautifulSoup 返回网页标签的名称、父标签名称、行号、完整路径
BeautifulSoup 返回网页标签的名称.父标签名称.行号.完整路径应用beatifulsoup完成网页标签的名称.父标签名称.行号.完整路径的获取,这里reversed实现对网页标签的遍历. ...
js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...
html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色
CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...
CSS设置html网页背景图片 CSS设置网页背景颜色
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...
#3使用html+css+js制作网页番外篇使用python flask 框架 (I)
#3使用html+css+js制作网页番外篇使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
web前端实训作业 html+css+javascript 水果网页设计实例企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...

CSS实现返回网页顶部

CSS实现返回网页顶部相关推荐

最新文章

热门文章