实现回到顶部的功能，根据学了元素滚动实现，温习知识点。

做之前先理清一下步骤和思路：

1、获得页面的滚动长度

var $page = $("html,body");

var distance = $("html").scrollTop()+$("body").scrollTop();

2、设置总时间

var time = 500;

3、设置间隔时间

var intervalTime = 50;

4、使用循环定时器不断滚动

5、/到达顶部, 停止定时器

//获得每次滑动的距离
var interdistance = distance/(time/intervalTime);
var inervaltimer = setInterval(function(){
distance -= interdistance;
if (distance<=0) {
distance = 0;
// 到达顶部, 停止定时器
clearInterval(inervaltimer);
}
$page.scrollTop(distance);
},intervalTime)

大概的设计应该差不多都是这样子，接下来的就是不同的场景举一反三

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #to_top{

                width: 30px;

                height: 40px;

                background: blue;

                font: 15px/20px arial;

                position: fixed;

                top: 700px;

                left: 1850px;

                text-align: center;

                color: #fff;

                cursor: pointer;

            }

        </style>

    </head>

    <body style="height: 2000px;">

        <div id="to_top">返回顶部</div>

        <script type="text/javascript" src="../../../js/jquery-1.10.1.js" ></script>

        <script type="text/javascript">

            $("#to_top").click(function(){

                //设置则使用$("html,body")

                //获取的话，则使用分开的形式

                //$("html,body").scrollTop(0);

                var $page = $("html,body");

                //获得滑动的总长度

                var distance = $("html").scrollTop()+$("body").scrollTop();

                //滑动所需要的时间

                var time = 500;

                //间隔时间

                var intervalTime = 50;

                // 使用循环定时器不断滚动

                //获得每次滑动的距离

                var interdistance = distance/(time/intervalTime);

                var inervaltimer = setInterval(function(){

                    distance -= interdistance;

                    if (distance<=0) {

                        distance = 0;

                        // 到达顶部, 停止定时器

                        clearInterval(inervaltimer);

                    }

                    $page.scrollTop(distance);

                },intervalTime)

            })

        </script>

    </body>

</html>

jQuery之回到顶部的更多相关文章

  1. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  2. jquery javascript 回到顶部功能

    今天搞了一个回到顶部的JS JQ功能 (function($){ $.fn.survey=function(options){ var defaults={width:"298", ...

  3. jQuery实现“回到顶部”按钮功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

  5. 使用 jQuery 页面回到顶部

    function backTop() { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#t ...

  6. jquery方法回到顶部代码

    <style> /*默认样式,主要是position:fixed实现屏幕绝对定位*/ #gotoTop{display:none;position:fixed;top:75%;left:5 ...

  7. jQuery动态回到顶部

    $(".back_top").click(function () { var sc = $(window).scrollTop(); $('body,html').animate( ...

  8. 用Jquery写返回顶部代码

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...

  9. jquery实现"跳到底部"，"回到顶部"效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. MySQL数据库实验：任务二 表数据的插入、修改及删除

    目录 任务二 表数据的插入.修改及删除 一.利用界面工具插入数据 二.数据更新 (一)利用MySQL命令行窗口更新数据 (二)利用Navicat for MySQL客户端工具更新数据 三.数据库的备份 ...

  2. VCC、VDD、VSS以及VBAT的区别

    在STM32 的学习中,发现有几种看起来相关的名称,分别是VCC.VDD.VSS.VBAT,在经过搜索查找之后,总结如下: 1.VCC的C是Circuit的意思,是指整个供电回路的电压, 也有人说VC ...

  3. 基于OpenCV的微信跳一跳外挂

    摘要:微信跳一跳是时下热门的微信小游戏,基本原理是根据按压屏幕的时间控制棋子跳过的距离,使其跳到下一个方块上:现利用Android adb工具,PC端获取实时截图,使用OpenCV库分析图片计算距离, ...

  4. （杭电 2045）不容易系列之(3)—— LELE的RPG难题

    不容易系列之(3)-- LELE的RPG难题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...

  5. uva 210 - Concurrency Simulator (并行程序模拟)

    from CSDN: https://blog.csdn.net/su_cicada/article/details/87898579 例题6-1 并行程序模拟( Concurrency Simula ...

  6. gulp 输出到同一目录

    gulp.task('jsx', function () { var src='app/script/**/*.jsx'; // src='app/script/components/selloff/ ...

  7. Asp.Net实现在线人数统计 （转）

    原文件:http://blog.csdn.net/wxd_860825/article/details/4589292 利用Application对象和Session对象可以统计当前在线用户数量. 注 ...

  8. 20155203 2016-2017-2 《Java程序设计》第2周学习总结

    20155203 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 第三章的主要内容是使用Java语言设计程序的基础语法的学习 java语言中的计算:如果两个数 ...

  9. 201555334 实验一：Java开发环境的熟悉 总结

    201555334 实验一:Java开发环境的熟悉 一.实验目的: 使用JDK编译.运行简单的Java程序: 使用Idea软件 编辑.编译.运行.调试Java程序. 二.实验内容: 编程实现让用户输入 ...

  10. 21045234黄斐《java程序设计》第四周

    教材学习内容总结 第六章部分 - 继承与多态 何谓继承 继承面向对象中,子类继承父类,避免重复的行为定义.一般来说,父类的父类也称父类,且同一个子类只允许拥有一个父类,而同一个父类则可以拥有多个子类. ...