方法:

1.首先在body添加一个标签,在一个页面添加,其它页面也会生效。

  1. <body> <a name="top">

2.然后在页脚添加一个链接

  1. <a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>

3.JS代码,可以单独写成一个文件,插入到html里

  1. 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的更多相关文章

  1. 弹性返回顶部JS代码

    弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

  2. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  3. 返回顶部js

    backToTop.js: (function () { var $backToTopEle = $('<div class="backToTop"></div& ...

  4. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  5. Web前端 页面功能——点击按钮返回顶部的实现方法

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  6. 【转】用jquery编写动态的返回顶部特效

    jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...

  7. 添加“返回顶部”小图标按钮的JS(JavaScript)代码详解

    如何给自己的网站添加方便快捷的"返回顶部"小图标按钮呢?如下图: JS源代码: /** * JavaScript脚本实现回到页面顶部示例 * @param acceleration ...

  8. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  9. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

随机推荐

  1. 【java基础】 如何导入外部jar包

    转:from http://www.zhihu.com/question/20311561 有两种常用的方法. 1. 以外部包(External Archives)的形式导入. 在默认位于 Eclip ...

  2. Android SQLite (四 ) 全面详解(二)

    SQLite创建数据库 创建数据库语法: sqlite3 DatabaseName.db 如下展示一个实例: SQLite附加数据库 假设这样一种情况,当在同一时间有多个数据库可用,您想使用其中的任何 ...

  3. TP快捷函数

    U();创建URL地址 C();获取或设置系统变量信息 A();实例化控制器对象 R():实例化控制器对象且同时调用控制器里的某个方法 I();过滤表单提交的数据,代替$_POST

  4. transition的局限

    transition的优点在于简单易用,但是它有几个很大的局限. (1)transition需要事件触发,所以没法在网页加载时自动发生. (2)transition是一次性的,不能重复发生,除非一再触 ...

  5. Spring 集成 RMI

    Maven <dependency> <groupId>org.springframework</groupId> <artifactId>spring ...

  6. GIT在Linux上的安装和使用简介

    GIT最初是由Linus Benedict Torvalds为了更有效地管理Linux内核开发而创立的分布式版本控制软件,与常用的版本控制工具如CVS.Subversion不同,它不必服务器端软件支持 ...

  7. VSFTPD配置TLS/SSL

    今天在OSX上配置Coda2 + Xampp的时候,发现FTP老是不连接到服务器上面,导致每次更改了文件都需要使用scp命令上传到服务器.如果一个文件还好,文件和文件夹一多就得使用rp参数全部提交,再 ...

  8. 存储过程中执行动态Sql语句

    MSSQL为我们提供了两种动态执行SQL语句的命令,分别是EXEC和sp_executesql;通常,sp_executesql则更具有优势,它提供了输入输出接口,而EXEC没有.还有一个最大的好处就 ...

  9. JS之apply,call,bind区别

    为了加深对基础知识的理解,今天再复习下js中的apply,call,bind的区别和用法.整理笔记的过程也是一个再次学习的过程. apply和call js中的调用apply和call方法可以改变某个 ...

  10. 安卓界面篇(一) 自定义一个topbar

    步骤一: 先在values 里 新建一个attrs.xml 来设置我们的属性值: <?xml version="1.0" encoding="utf-8" ...