<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery</title>

    <style>

      .back_top{

          position: fixed;

          background:gray;

          color: #ffffff;

          padding: 5px;

          bottom: 30px;

          right: 30px;

          width: 42px;

          text-align: center;

          cursor: pointer;

      }

    </style>

</head>

<body>

<div>

    <h1>回到顶部</h1>

        <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

    <br/>

        <div class="back_top">回到顶部</div>

</div>

<script src="../js/vendor/jquery-3.2.1.min.js"></script>

<script>

    //不够平滑

    // $(".back_top").click(function(){

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

    // })

    //设置成平滑滚动

    $(".back_top").click(function(){

        //滚动时 滚动条离上部的距离

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

        //设置滚动的总时间

        var time=1000;

        //间隔时间

        var intervalTime=50;

        var itemDistance=distance/(time/intervalTime);

        var intervalId = setInterval(function(){

            distance-=itemDistance;

            if(distance<=0){

                clearInterval(intervalId);

            }

            $("html,body").scrollTop(distance-itemDistance);

        },intervalTime);

    })

</script>

</body>

</html>

jQuery实现“回到顶部”按钮功能的更多相关文章

  1. 简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示

    1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...

  2. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

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

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

  4. Angular回到顶部按钮指令

    之前的分页代码指令化在线下测试没有问题,到服务器上就不运行了,所以那个先放一放. 今天来把"回到顶部"按钮指令化.首先是页面html: <!--回弹按钮--> < ...

  5. jQuery之回到顶部

    实现回到顶部的功能,根据学了元素滚动实现,温习知识点. 做之前先理清一下步骤和思路: 1.获得页面的滚动长度 var $page = $("html,body"); var dis ...

  6. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现

    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...

  7. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

  8. jquery javascript 回到顶部功能

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

  9. 原生JavaScript实现页面回到顶部的功能

    /*如果想实现点击一个按钮让滚动条回到最顶部的功能,首先可能就会想到它是从底部位置移动到顶部的位置 它是一个运动的过程,只要知道当前位置(current Position)和想要到达的位置(targe ...

随机推荐

  1. Centos7 安装eclipse IDE for C++

    1.安装前eclipse需要java, yum -y install java 查看版本java -version 2.下载eclipse IDE http://www.eclipse.org/dow ...

  2. l1 l2 loss

    衡量预测值与真实值的偏差程度的最常见的loss: 误差的L1范数和L2范数 因为L1范数在误差接近0的时候不平滑,所以比较少用到这个范数 L2范数的缺点是当存在离群点(outliers)的时候,这些点 ...

  3. 使用Analyze 和Instruments-Leaks分析解决iOS内存泄露

    版权声明:本文为博主原创文章,未经博主允许不得转载. 使用Analyze和Instruments-Leaks分析解决iOS内存泄露   实验的开发环境:Xcode 7   一.使用Product-An ...

  4. Python 学习笔记（十一）Python语句（三）

    While 循环语句 用于循环执行程序,即在某条件下,循环执行某段程序,以处理需要重复处理的相同任务. 语法: while 判断条件: 执行语句…… 执行语句可以是单个语句或语句块.判断条件可以是任何 ...

  5. iOS：网络请求（17-12-26更）

    先开一篇,以后再补充... 1.判断请求数据是否为空. 参考简书<解决NSNull对象的烦恼> --ma772528138 之前使用网络请求没丢包,而使用 socket 的时候丢过包.如果 ...

  6. 类似"音速启动"的原创工具简码"万能助手"在线用户数终于突破100了!

    原本只是开发出来方便自己的一个小工具,看到群友也喜欢,就随手分享了, 经过1个多月的自然积累,在线用户数终于突破100了,这增长速度实在让人泪奔~ 博客园的朋友如果看到,喜欢的话就拿去用吧, 万能助手 ...

  7. MySQL学习之变量

    变量 MySQL本质是一种编程语言,需要很多变量来保存数据,mysql中很多的属性控制都是通过MySQL中固有的变量来实现的. 系统变量 系统内部定义的变量,系统变量针对的是所有用户(MySQL客户端 ...

  8. 关于MySQL自增主键的几点问题（上）

    前段时间遇到一个InnoDB表自增锁导致的问题,最近刚好有一个同行网友也问到自增锁的疑问,所以抽空系统的总结一下,这两个问题下篇会有阐述. 1. 划分三种插入类型 这里区分一下几种插入数据行的类型,便 ...

  9. linux系统中用户

    一.用户身份介绍: 1.系统管理员用户,UID(User IDentification) :0, 2.系统用户,UID为1~999,默认的程序都有独立的系统用户负责,运行,进而控制被破坏的范围, 3. ...

  10. mysql中对于时间的处理，时间的滚动，求时间间隔，切换时区等等

    mysql中对于时间的处理,时间的滚动,求时间间隔,切换时区等等 在mysql的使用过程中,有时候会出现对时间进行的操作,比如时间向前向后滚动,求2个时间的间隔,或者切换时区的操作 1,时间向前滚动( ...