点选TOP后并不是直接跳到页顶的，而是滚动上去的

如果网页太长了，一般都使用锚标签快速返回到TOP
<a href="#header" title="back to top">top</a> 确实很简单，不过却有一些高手让这个简变成不简单：

国外演示地址：http://tonyyoo.com/v2/

点选TOP后并不是直接跳到页顶的，而是滚动上去的。。而且距离页顶越长滚动的速度也就越快。。。

研究了下，用到的JS有4个：
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript" src="scripts/pageScroll.js"></script>

看起来都好复杂。。不知道有没有可以精简点的代码可以实现同样的效果呢，我是做不来的了。。
在页面onload之后，遍历所有超链接，判断href中是否有#header，有的话触发scrollTo即可。。。

runcode

function s2top(){
var a = document.getElementsByTagName('a');
var l = a.length;
for (var i = 0 ; i

for (var i = 0 ; i

go to 头

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 点选TOP后并不是直接跳到页顶的，而是滚动上去的

    如果网页太长了,一般都使用锚标签快速返回到TOP <a href="#header" title="back to top">top</a> 确实很简单,不过却有一些高手让这个简变成不简单: 国外演示地址:http://tonyyoo.com/v2/ 点选TOP后并不是直接跳到页顶的,而是滚动上去的..而且距离页顶越长滚动的速度也就越快... 研究了下,用到的JS有4个: <script type="text/javascri

  • 点选TOP后并不是直接跳到页顶的，而是滚动上去

    demo中的p中的script改大或改小看看...移动到top的时间始终是一定的,你也可以设置一个阀值,在页面高度到达这个阀值之前,移动的总时间是多少,当页面高度超过这个数时,移动的总时间反而以一定比例减小,自己试试看吧... 我们_回到页顶效果代码 function s2top(){ var a = document.getElementsByTagName('a'); var l = a.length; for (var i = 0 ; i for (var i = 0 ; i go to

  • javascript实现选中复选框后相关输入框变灰不可用的方法

    javascript实现选中复选框后相关输入框变灰不可用的方法

    本文实例讲述了javascript实现选中复选框后相关输入框变灰不可用的方法.分享给大家供大家参考.具体如下: 在一些网站上经常会看到的这种功能,选中复选框,相关的选项为变灰色,不可用,看上去会专业一些,也是提升用户体验的一种方式. 运行效果如下图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>选

  • 一览画面点击复选框后获取多个id值的方法

    在web开发中经常会遇到一览画面中每一条记录前都带一个复选框,点击后选中该条记录进行删除.修改.查看等操作. 修改和查看都是获取一条记录的id值后传递到后台进行查询获取该记录对象的各种属性值,再显示到画面上. 我说的重点是选中多条记录后进行批量删除,如何获取多条记录的id值是问题的关键.首先是在jsp页面中全选中复选框的方法. 代码如下: function checkEvent(name, allCheckId) { var allCk = document.getElementById(all

  • Android超详细介绍自定义多选框与点击按钮跳转界面的实现

    Android超详细介绍自定义多选框与点击按钮跳转界面的实现

    总程:在avtivity_main.xml设计5个控件,btn1-5,点击btn1弹出一个多选对话框,点击按钮btn1弹出一个多选框可选择你喜欢的打野英雄,点击btn2跳转到activity_main2界面(就是图片,不可选择)设计思路流程:在activity_main.xml布局界面,总体在头目录进行垂直排列,然后镶嵌5个水平的线性布局(左是ImageView,右边是Button按钮)由于5张图的大小在一个屏幕显示不出来,所以添加一个ScoveView滚动,以使所有资源可以看到! 在MainA

  • ThinkPHP跳转页success及error模板实例教程

    本文以实例讲解了ThinkPHP跳转页面的success与error方法所对应的视图与控制器的实现方法,通过本实例教程可以帮助读者更好的掌握success方法与error方法的使用. 首先是控制器中,可以使用下代码: <?php // 本文档自动生成,仅供测试运行 class IndexAction extends Action { /** +---------------------------------------------------------- * 默认操作 +----------

  • thinkphp制作404跳转页的简单实现方法

    网上有很多thinkphp的404页面制作方法,但大多太过繁琐不简便,很烦人,所以为大家分享了最便捷的404制作方法,如下. 在thinkphp的公共目录的config配置文件中增加配置项: 'TMPL_EXCEPTION_FILE' => 'Public/404.html', 在Public文件夹中创建404.html内容如下 <!DOCTYPE html > <html> <head> <meta charset=utf-8" /> &l

  • 漂亮的thinkphp 跳转页封装示例

    项目是要一点点按优先级进行优化的,现在到优化thinkphp的跳转页了. <?php if(C('LAYOUT_ON')) { echo '{__NOLAYOUT__}'; } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跳转中</title> <style> .buffer{ background-color

  • Unity UGUI实现滑动翻页直接跳转页数

    本文实例为大家分享了Unity UGUI实现滑动翻页,直接跳转页数的具体代码,供大家参考,具体内容如下 首先看一下最终效果 其实这个功能基本上是老生常谈了,所以代码还是很简单 using UnityEngine; using System.Collections; using UnityEngine.UI; using System.Collections.Generic; using UnityEngine.EventSystems; using System; public class Pa

  • Angular+Ionic使用queryParams实现跳转页传值的方法

    最近,在做电商项目,项目中需要实现:点击编辑按钮,跳转页面完成添加地址,修改地址功能. 使用到angular传参,简单做一总结: 1,发送界面ts //编辑地址 EditorAddress(item) { console.log("选中的地址"); console.log(item); this.router.navigate(['/editor-address'], { queryParams: item }) } 2,接收界面ts public personName:string=

随机推荐