html5回到顶部代码,JS返回顶部实例代码

本文实例为大家分享了JS返回顶部实例代码，供大家参考，具体内容如下

html/css部分

Document

.container{

width:1190px;

margin: 0px auto;

}

.container a{

display: none;

width:40px;

height:40px;

background: url(/535e0dc100010e9c00400080.jpg) no-repeat;

position: fixed;

left:95%;

bottom: 50px;

}

.container a:hover{

background: url(/535e0dc100010e9c00400080.jpg) no-repeat;

background-position: left -40px;

}

JS部分

window.οnlοad=function(){

var obtn=document.getElementById("btn");

var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;

var isTop=true;

var timer=null;

window.οnscrοll=function(){

var topH=document.documentElement.scrollTop||document.body.scrollTop;

if(topH>clientHeight){

obtn.style.display="block";

}else{

obtn.style.display="none";

}

obtn.οnclick=function(){

timer=setInterval(function(){

var topH=document.documentElement.scrollTop||document.body.scrollTop;

var stepLength=Math.ceil(topH/5);

document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;

if(topH==0){

clearInterval(timer);

}

},30);

}

学习视频地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html5回到顶部代码,JS返回顶部实例代码相关推荐

html匀速回到顶部,原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
html背景mov,科技常识：html5自动播放mov格式视频的实例代码
今天小编跟大家讲解下有关html5自动播放mov格式视频的实例代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5自动播放mov格式视频的实例代码的相关资料,希望小伙伴们看了有 ...
手机号判断正则php2019,2019手机号码JS正则表达式验证实例代码
概念正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串的 ...
html怎样自动播放视频,html5自动播放mov格式视频的实例代码
这个不算啥新奇吧?但还是记录一下. 这个问题应该这么看. 1.首先网站要支持.MOV格式文件就是说,网站要能识别.MOV格式文件. 如何识别?设置MIME类型.以IIS为例.除了可以在IIS界面上直 ...
2022手机号码JS正则表达式验证实例代码
这篇文章主要介绍了2022手机号码JS正则表达式验证实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下概念正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的 ...
html js 回到顶部,简单的返回顶部的js代码
返回顶部js代码 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...
js浏览器回到顶部方法_js 返回顶部按钮
要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏. 1.css #scrollTop{position:fixed;bottom:20px;right:20px;he ...
前端切图:一句代码实现返回顶部
图片发自简书App 首先引入js文件 <script type="text/javascript" src="http://hovertree.com/ziyuan ...
js返回顶部和始终保持底部
用到了三个部分: document.documentElement.scrollHeight //表示页面总高度,包含未显示的 document.documentElement.clientHeigh ...
cef js返回c++的代码_CEF3开发者系列之外篇——IE中JS与C++交互
使用IE内核开发客户端产品,系统和前端页面之间的交互,通常给开发和维护带来很大的便利性.但操作系统和前端之间的交互却是比较复杂的.具体来说就是脚本语言和编译语言的交互.在IE内核中html和css虽然 ...

html5回到顶部代码,JS返回顶部实例代码

html5回到顶部代码,JS返回顶部实例代码相关推荐

最新文章

热门文章