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

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

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. 嵌入式C语言自我修养 09：链接过程中的强符号和弱符号

    9.1 属性声明:weak GNU C 通过 __atttribute__ 声明weak属性,可以将一个强符号转换为弱符号. 使用方法如下. void __attribute__((weak)) fu ...

  2. python小项目之微信远程控制

    前两天接触了一个有趣的python模块--itchat,这个模块可以非常方便的操作微信,今天就来使用这个模块来实现微信远程控制. 环境准备 itchat模块不是python标准模块(内置模块),是一个 ...

  3. （数据科学学习手札54）Python中retry的简单用法

    一.简介 retry是一个用于错误处理的模块,功能类似try-except,但更加快捷方便,本文就将简单地介绍一下retry的基本用法. 二.基本用法 retry: 作为装饰器进行使用,不传入参数时功 ...

  4. 20155222 卢梓杰 myod

    20155222 卢梓杰 myod 复习c文件处理内容 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 main与其他分开,制作静态库和动态库 编写Makefi ...

  5. 20155230 实验三《敏捷开发与XP实践》实验报告

    20155230 实验三<敏捷开发与XP实践>实验报告 一.使用工具(Code->Reformate Code)把代码重新格式化 IDEA里的Code菜单有很多实用的功能可以帮助我们 ...

  6. # C语言假期学习笔记——6

    C语言假期学习笔记--6 数组 主要学习了一位数组和二维数组. 数组是一组具有相同类型的变量的集合.C语言程序通过元素的下标来访问数组中的元素.(下标从0开始) 一位数组 类型 数组名[元素个数] 二 ...

  7. STM32L431仿真卡在HAL_InitTick(TICK_INT_PRIORITY);

    1. 使用IAR 8.20版本,STM32L431RBT芯片,JLINK V9仿真器,实际仿真测试的时候卡在如下的函数 /* Use SysTick as time base source and c ...

  8. Spring学习(四)-----Spring Bean引用同xml和不同xml bean的例子

    在Spring,bean可以“访问”对方通过bean配置文件指定相同或不同的引用. 1. Bean在不同的XML文件 如果是在不同XML文件中的bean,可以用一个“ref”标签,“bean”属性引用 ...

  9. async+await 让界面飞，让双手爽

    .net 4.5已经发布很久了,但是一直也没有静下心来好好的研究微软给开发者带来的喜悦. 今天我将简单的介绍下 async + await 这对搭档的出现,如何让频繁假死的界面飞起来(其实只是不再阻塞 ...

  10. 记录阿里云ECS(Centos7.4)安装mysql 8.0.X服务

    #*.rpm介绍 大多数二进制rpm包都包含在名称中倒数第二个字段中编译rpm的体系结构..rpm软件包有那么几种 *.src.rpm 源程序包,要先通过编译才能安装 *.noarch.rpm 该包适 ...