<!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. 浅谈DB2在线分析处理函数

    最近碰到一个测试需求,使用到了在线分析处理(OLAP),现总结记录一下,也希望能帮到有相关问题的朋友. 1. 测试环境是DB2,通过ETL(数据抽取,数据转换,数据加载)技术将数据源数据加载到目标数据 ...

  2. ARM 汇编指令集 特点之一：指令后缀

    1.同一 指令 添加不同的后缀 就会有不同的功能! 例子: B (Byte)  功能不变,操作长度变为8位 H (Half Word) 功能不变,操作长度变为16位 S(Signed) 功能不变,操作 ...

  3. apache Rewrite配置（转）

    1.Rewrite规则简介: Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基于服务器级的(httpd.conf)和目录级的 (.htaccess)两种方式.如果要 ...

  4. react系列（二）高阶组件-HOC

    高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...

  5. Java反射机制--是什么，为什么，怎么用。

    往往当我们面对一项新的知识时,我们往往需要知道三个方面,它是什么,它能做什么,它比原有知识强在哪里,我们该怎么使用它.当你能够解决这些问题时,便意味着你已经对这项知识入门了. 一.是什么 Java R ...

  6. 自己花了2天时间，重新整理了个全面的vue2的模板

    自己花了2天时间,重新整理了个全面的vue2的模板,基本vue中需要的部分都整理封装好了,希望大家喜欢^ ^.欢迎大家star或者fork呀~,https://github.com/qianxiaon ...

  7. ie 兼容

    ese,promise解决text/babel <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7 ...

  8. linux简单文件管理命令的使用

    在linux系统中,命令的使用要方便于图形界面的使用,上一个博客介绍了如何使用PuTTy远程登录linux,当然,我使用的是本地登录(手动滑稽) 经过一星期课余时间的了解,大致了解了一些简单的文件管理 ...

  9. python开发的学生管理系统

    python开发的学生管理系统(基础版) #定义一个函数,显示可以使用的功能列表给用户 def showInfo(): print("-"*30) print(" 学生管 ...

  10. 对布局定位设置-position

    使用position属性,会激活5个属性 left right bottom top z-index(-1至999) 注:z-index:会改变内容的层级关系, 1.绝对定位 position: ab ...