gotoTop返回顶部 JS
方法:
1.首先在body添加一个标签,在一个页面添加,其它页面也会生效。
<body> <a name="top">
2.然后在页脚添加一个链接
<a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>
3.JS代码,可以单独写成一个文件,插入到html里
var goto_top_type = -1; var goto_top_itv = 0; function goto_top_timer() { var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop; var moveby = 15; y -= Math.ceil(y * moveby / 100); if (y < 0) { y = 0; } if (goto_top_type == 1) { document.documentElement.scrollTop = y; } else { document.body.scrollTop = y; } if (y == 0) { clearInterval(goto_top_itv); goto_top_itv = 0; } } function goto_top() { if (goto_top_itv == 0) { if (document.documentElement && document.documentElement.scrollTop) { goto_top_type = 1; } else if (document.body && document.body.scrollTop) { goto_top_type = 2; } else { goto_top_type = 0; } if (goto_top_type > 0) { goto_top_itv = setInterval('goto_top_timer()', 10); } } }
OK
这个JS有滚动效果
gotoTop返回顶部 JS的更多相关文章
- 弹性返回顶部JS代码
弹性返回顶部JS代码 弹性返回顶部JS代码点击下载
- 手机端网页返回顶部js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 返回顶部js
backToTop.js: (function () { var $backToTopEle = $('<div class="backToTop"></div& ...
- css 简单 返回顶部 代码及注释说明
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- Web前端 页面功能——点击按钮返回顶部的实现方法
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- 【转】用jquery编写动态的返回顶部特效
jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...
- 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解
如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
随机推荐
- js知识体系的梳理一
今天简单的总结了js的一些东西,梳理下整个体系,每一次的总结都会有不同的收获:js总结一一.[获取元素]: 1.通过ID: var oBtn=document.getElementById('btn1 ...
- jquery堆栈与队列
期待期待期待期待期待期待期待期待期待期待期待期待期待期待期待期待期待期待期待期待期待期待期待
- S2小测--索引--视图
1. 关于Sql server 视图 视图是一个虚拟表,我们在查询视图的时候,实际上是对基础表的查询.视图不仅可以作为SELECT查询的目标,也可以作为修改语句的目 标.理论上它可以像普通的物理表一 ...
- 26Mybatis_一级缓存及其测试
这篇文章讲解一级缓存: 先介绍一级缓存的原理:
- 调用Oracle存储过程并获取out参数值
原文: http://tech.it168.com/oldarticle/2006-04-02/200604021512359.shtml http://www.cnblogs.com/m-cnblo ...
- 【转】【Asp.Net】Asp.net发送邮件的两种方法小结
这几天看了一下Asp.net发送邮件方面的东西,记得之前的IIS6上有SMTP服务器,可以直接利用这个进行邮件发送,现在的开发环境是Windows 7,找了半天没有找到,到网络上查了才知道原来wind ...
- [py] os.system os.popen commands 执行shell
1.仅输出到屏幕,pwd保存的是状态<=====可用于执行shell命令 pwd=os.system(pwd) 2.popen可以保存命令结果 pwd=os.popen('pwd').r ...
- 通过spring,在项目的任意位置获取当前Request
需要引入: import javax.servlet.http.HttpServletRequest; import org.springframework.web.context.request.R ...
- C#实现对指定文件夹中文件按修改时间排序
string path = "~/Document/Introduction/团队管理制度/"; DirectoryInfo dirinfo = new Di ...
- matlab绘制二维图形
常用的二维图形命令: plot:绘制二维图形 loglog:用全对数坐标绘图 semilogx:用半对数坐标(X)绘图 semilogy:用半对数坐标(Y)绘图 fill:绘制二维多边填充图形 pol ...