前台特效（2）回到顶部

---恢复内容开始---

原生js(有兼容性问题):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!-- 脚本 -->
<script>
window.onload=function(){
var one = document.getElementById("one")
window.onscroll=function(){if (document.documentElement.scrollTop>=document.documentElement.clientHeight*0.3)
{
one.style.display="block"
one.style.position="fixed"
one.style.top="90%"
one.style.left="90%"
}
if (document.documentElement.scrollTop<document.documentElement.clientHeight*0.3)
{
one.style.display="none"
one.style.position=""}
}one.onclick=function(){var a1a = setInterval(yd,60)function yd (){
document.documentElement.scrollTop-=100;
if (document.documentElement.scrollTop==0)
{
clearInterval(a1a)
}
}if (document.addEventListener)
{document.addEventListener("DOMMouseScroll",scrollfun,false);
}
window.onmousewheel=document.onmousewheel=scrollfunfunction scrollfun(e){
var ev = e||window.event
if (ev.wheelDelta==-120||ev.detail==3)
{
clearInterval(a1a)
}
}}
}
</script>
</head><body>
<input type="button" id="one" value="回到顶部" style="display:none"/>
<div style="height:10000px">
</div>
</body>
</html>

-------------------------------------------华丽的分割线-------------------------------------------

jquery方法：

<!DOCTYPE html>
<html><head><title>回到顶部</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script><script>$(function(){$off = true$(window).scroll(function(){if($(window).scrollTop()>500){if($off){$("<div/>").attr("id","ReturnTop").css({width:"50px",height:"50px",backgroundImage:"url(./ReturnTop.png)",position:"fixed",bottom:"100px",right:"20px",display:"none"}).appendTo("body").fadeIn().click(function(){$(window).scrollTop(0);$(this).fadeOut();});$off = false;}else{$("#ReturnTop").fadeIn();}}});})</script></head><body><div id="one" style="height: 10000px;width:100px;border:solid 1px red;">TODO write content</div></body>
</html>

图片：ReturnTop.png

这样写的好处：不用额外的书写css，便于添加与部署

转载于:https://www.cnblogs.com/longdidi/archive/2013/03/07/2949052.html

前台特效（2）回到顶部相关推荐

html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...
插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器回到顶部和回到底部在当前的网页中应用时相当广泛的为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动那么我们就要 ...
php 回到顶部,jquery如何实现点击网页回到顶部效果？（图文+视频）
本篇文章主要给大家介绍如何用jquery代码实现网页回到顶部的效果. 我们在浏览各大网站页面时,想必大家肯定都遇到过,当阅览一个长页面时,拉到下面部分会出现类似回到顶部的按钮特效吧. 这种点击回到顶部 ...
Jquery 回到顶部
转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html 用jQuery实现渐隐渐显的返回顶部效果(附多图) 先来看几个图片效果 ...
Vue+element UI实现“回到顶部”按钮组件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/caomage/article/details/85006973 背景开发框架是vue+webpac ...
在UIWindow上加类似于“回到顶部”的按钮
在公司上个版本的开发中遇到了一个UI布局的小问题: 某个页面需要增加一个分享按钮,但是该页面是二级页面,导航栏右边也已经放置了2个button. 起初和老大谈论这个问题的时候想到的方法是导航栏右边加三 ...
Vue HTML：在Vue上写Html遇到的一些问题，html的首行缩进，html的行间距，element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
vue 返回滚动条顶部组件_vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码...
//以下代码放到一个adapt.js文件当中 (function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientatio ...
页面滚动事件和利用JS实现回到顶部效果
页面滚动事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

前台特效（2）回到顶部

前台特效（2）回到顶部相关推荐

最新文章

热门文章