随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧

注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop

 /**
 * JavaScript脚本实现回到页面顶部示例
 * @param acceleration 速度
 * @param stime 时间间隔 (毫秒)
 **/
 function gotoTop(acceleration,stime) {
    acceleration = acceleration || 0.1;
    stime = stime || 10;
    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 0;
    var x3 = 0;
    var y3 = 0;
    if (document.documentElement) {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }
    if (document.body) {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }
    var x3 = window.scrollX || 0;
    var y3 = window.scrollY || 0;

    // 滚动条到页面顶部的水平距离
    var x = Math.max(x1, Math.max(x2, x3));
    // 滚动条到页面顶部的垂直距离
    var y = Math.max(y1, Math.max(y2, y3));

    // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
    var speeding = 1 + acceleration;
    window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));

    // 如果距离不为零, 继续调用函数
    if(x > 0 || y > 0) {
        var run = "gotoTop(" + acceleration + ", " + stime + ")";
        window.setTimeout(run, stime);
    }
 }

js平滑返回顶部代码的更多相关文章

  1. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

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

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

  4. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

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

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

  6. [html][转]常用返回顶部代码

    转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...

  7. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  8. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

  9. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

随机推荐

  1. Linux移植的一般过程

    前一阵子在公司移植Linux2.6到一块ARM11的开发板上,下面粗略讲讲移植Linux的一般过程. 一开始的UBOOT的移植不多说了.UBOOT最后有两种方式进入Linux,一种是使用uImage, ...

  2. 使用POI替换word中的特定字符/文字改进版

    package com.xfzx.test.POI.main; import java.io.File; import java.io.FileInputStream; import java.io. ...

  3. oracle11g的standby性能分析报告statpack安装

    一般常见的分析standby database的性能问题的方法就是通过动态性能视图来判断,从11g开始,随着Active Data Guard功能的出现,早期的Statspack 工具可以在stand ...

  4. 炉石传说 C# 开发笔记 (法术篇)

    炉石的设计,最核心的内容是法术效果. 法术卡牌,无疑是法术的集中体现,但是,法术效果除了在法术卡牌之外,也不除不在. 随从的战吼,亡语,奥秘的揭示等等都是法术效果的体现. 法术卡牌在炉石里面有很多种( ...

  5. 一文读懂UGC:互联网上的生态秘密

    转载自近乎: UGC(User- Generated Content)用户原创生产内容,它是相对于PGC(Professionally-produced Content)专业生产内容的一种内容来源,简 ...

  6. C# 操作鼠标移动到指定的屏幕位置方法

    /// <summary> /// 引用user32.dll动态链接库(windows api), /// 使用库中定义 API:SetCursorPos /// </summary ...

  7. Dubbo入门

    早就听说了dubbo的好处,但是在项目中一直没有使用的机会,所以一直不知道怎么使用.今天晚上有空,简单的学习一下 就当入个门,以后项目中遇到的话,那么使用起来就比较简单了,至于介绍的话,我就不总结了, ...

  8. 深入浅出Java多线程

    Java给多线程编程提供了内置的支持.一个多线程程序包含两个或多个能并发运行的部分.程序的每一部分都称作一个线程,并且每个线程定义了一个独立的执行路径. 多线程是多任务的一种特别的形式,但多线程使用了 ...

  9. Verilog学习笔记认识提升篇(一)...............时序的基本概念(待补充)

    建立和保持时间: 建立时间(Tsu)是指在时钟上升沿到来之前数据必须保持稳定的时间,保持时间(Th)是指在时钟上升沿到来以后数据必须保持稳定的时间.一个数据需要在时钟的上升沿被锁存,那么这个数据就必须 ...

  10. jquery学习笔记:获取下拉框的值和下拉框的txt

    <div class="form-group"> <select class="form-control" id="iv_level ...