写一个JavaScript“返回顶部”功能
在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮。
效果演示可以查看本页。如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条。点击这里“返回顶部”字样的按钮后,页面就像是抹了润滑剂一样,倏地一声就滑到顶部了,同时,该点击按钮也玩起了躲猫猫 – 不见了。
效果演示
JavaScript 代码
<script type="text/javascript">
var tool = {
//此方法为了避免在 ms 段时间内,多次执行func。常用 resize、scoll、mousemove等连续性事件中
buffer: function(func, ms, context){
var buffer;
return function(){
if(buffer) return; buffer = setTimeout(function(){
func.call(this)
buffer = undefined;
},ms);
};
}, /*读取或设置元素的透明度*/
opacity: function(elem, val){
var setting = arguments.length > 1;
if("opacity" in elem.style){//elem.style["opacity"] 读取不到CSS class中的值
return setting ? elem.style["opacity"] = val : elem.style["opacity"];
}else{
if(elem.filters && elem.filters.alpha) {
return setting ? elem.filters.alpha["opacity"] = val*100 : elem.filters.alpha["opacity"]/100;
}
}
}, //获取或设置文档对象的scrollTop
//function([val])
documentScrollTop: function(val){
var elem = document;
return (val!== undefined) ?
elem.documentElement.scrollTop = elem.body.scrollTop = val :
Math.max(elem.documentElement.scrollTop, elem.body.scrollTop); }
};
//动画效果
var effect = {
//淡入
fadein: function (elem){
var val = 0;
var interval = 25; setTimeout(function(){
val += 0.1;
if(val>1){
tool.opacity(elem, 1)
return;
}else {
tool.opacity(elem, val)
setTimeout(arguments.callee, interval);
}
},interval); }, //淡出
fadeout: function (elem){
var val = 1;
var interval = 25; setTimeout(function(){
val -= 0.1; if(val < 0){
tool.opacity(elem, 0)
return;
}else {
tool.opacity(elem,val) ;
setTimeout(arguments.callee, interval);
}
},interval); }, //减速移动滚动条
move: function(scrollTop){
setTimeout(function(){
scrollTop = Math.floor((scrollTop * 0.65));
tool.documentScrollTop(scrollTop);
if(scrollTop !=0 ){
setTimeout(arguments.callee, 25);
}
},25);
}
}; //主程序
(function(){//gotop
var visible = false;
var elem = document.getElementById("gotop"); function onscroll(){
var scrollTop = tool.documentScrollTop();
if(scrollTop > 0){
if(!visible){
effect.fadein(elem)
visible = true;
}
}else{
if(visible){
effect.fadeout(elem);
visible = false;
}
} } function onclick(){
var scrollTop = tool.documentScrollTop();
effect.move(scrollTop);
} elem.onclick = onclick;
window.onscroll = tool.buffer(onscroll, 200, this);
})();
</script>
写一个JavaScript“返回顶部”功能的更多相关文章
- 写一个方法完成如下功能,判断从文本框textbox1输入的一个字符,如果是数字则求该数字的阶乘,如果是小写字条,则转换为大写,大写字符不变,结果在文本框textbox2中显示
窗体设计: 代码: using System; using System.Collections.Generic; using System.ComponentModel; using System. ...
- 使用Javascript实现返回顶部功能。
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- javascript实现网页返回顶部功能
在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...
- 转载:jQuery实现返回顶部功能
转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- jQuery实现返回顶部功能
整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图 第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- javascript返回顶部几种代码总结
纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...
随机推荐
- JavaSE 第二次学习随笔(关于内存的小题)
class HelloA { public HelloA() { System.out.println("HelloA"); } { System.out.println(&quo ...
- python中使用空格还是使用 Tab键缩进的建议
对于程序员来说,其实Tab和空格远远不只是“立场”问题那么简单. 在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了.空格不会出现这个问题,因 ...
- pyspider -- 禁止请求非200响应码抛异常
在pyspider中若crawl()网址时出现非200的异常信息,会抛出一个异常. 可以在对应的回调函数上面通过@catch_status_code_error 进行修饰,这样就能不抛出异常正常进入回 ...
- Scrapy进阶
当我们使用scrapy框架爬取网站的时候,我们会有一个入口的url,一个名为start_urls,我们爬取的第一个网页是从这一开始的. 需求: 现在我们有一个这样的需求,比如说我们对起始的URL有一个 ...
- Tensorflow之MNIST的最佳实践思路总结
Tensorflow之MNIST的最佳实践思路总结 在上两篇文章中已经总结出了深层神经网络常用方法和Tensorflow的最佳实践所需要的知识点,如果对这些基础不熟悉,可以返回去看一下.在< ...
- Plsql developer 怎么在打开时登陆配置oracel client?
配置前 logon 这块是空白的,该怎么配置呢? 看下面 --> 安装完plsql 后 需要安装 oracle client, 这里不再赘述,请自行百度.下面将贴出如何使用 oracle cli ...
- cmd中可以运行java,但不能运行javac命令
在cmd中可以运行java,但运行javac命令时提示:'javac' 不是内部或外部命令,也不是可运行的程序或批处理文件. 原因:安装java时把jdk的路径和jre的路径选择成一样,就造成覆盖了. ...
- NB-IOT的键值对
1. 关于NB-IOT的软件开发,有一个功能,NB收到数据的时候可以唤醒处于低功耗下的MCU. 2. 2个键值对可以配置这个功能.使用键值对的方式. 3. 遇到的第一个问题,<config> ...
- 利尔达NB-IOT的PSM和eDRX低功耗模式笔记
1. NB-IOT的技术优势,广覆盖,NB-IOT与GPRS和LTE相比较,最大链路预算提升了20dB,相当于提升了100倍,即使在地车车库.地下室.地下管道等普通无线网络信号难以到达的地方也容易覆盖 ...
- js学习日记-变量的坑
js变量细节是前端面试经常遇到的问题,可见其重要程度,要想掌握这个知识点,需注意以下几点: 变量提升 所谓变量提升,就是使用了var关键字申明的变量,会提升到所在作用域的顶部.es5的作用域分为全局作 ...