<!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. MFC自定义消息的实现方法

    一.概述: 消息机制是windows程序的典型运行机制,在MFC中有很多已经封装好了的消息,如WM_BTN**等.但是在有些特殊情况下我们需要自定义一些消息去完成一些我们所需要的功能,这时候MFC的向 ...

  2. CSU - 1224 ACM小组的古怪象棋

    传送门: http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1224 1224: ACM小组的古怪象棋 Lime Limit: 1 Sec     ...

  3. NLP语言模型

    语言模型: I. 基本思想 区别于其他大多数检索模型从查询到文档(即给定用户查询,如何找出相关的文档), 语言模型由文档到查询,即为每个文档建立不同的语言模型,判断由文档生成用户查 询的可能性有多大, ...

  4. Oracle记录类型（record）和%rowtype

    Oracle中的记录类型(record)和使用%rowtype定义的数据类型都是一种单行多列的数据结构,可以理解为一个具有多个属性的对象.其中属性名即为列名. 记录类型(record) 记录类型是一种 ...

  5. iOS：动画（18-10-15更）

    目录 1.UIView Animation 1-1.UIView Animation(基本使用) 1-2.UIView Animation(转场动画) 2.CATransaction(Layer版的U ...

  6. C++笔记005：用面向过程和面向对象方法求解圆形面积

    原创笔记,转载请注明出处! 点击[关注],关注也是一种美德~ 结束了第一个hello world程序后,我们来用面向过程和面向对象两个方法来求解圆的面积这个问题,以能够更清晰的体会面向对象和面向过程. ...

  7. shell基础知识---与监听服务器长连接端口状态

    从未写过脚本我的最近接了俩脚本的需求,就在这分享一下我的我学到基础知识主要就四部分内容 一.变量 变量的定义 string='字符串' string="字符串" num=808st ...

  8. Java分布式锁之数据库方式实现

    之前的文章<Java分布式锁实现>中列举了分布式锁的3种实现方式,分别是基于数据库实现,基于缓存实现和基于zookeeper实现.三种实现方式各有可取之处,本篇文章就详细讲解一下Java分 ...

  9. 【Hadoop故障处理】全分布下，DataNode进程正常启动，但是网页上不显示，并且DataNode节点为空

    [故障背景] DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空. /etc/hosts   的ip和hostname配置正常,各个机器之间能够ping通. [日志错误信息] ...

  10. [转]关于sdk更新Android SDK Tools 25.3.1版本后使用sdk manager闪退

    昨天这两个manager还工作正常,今天更新了一下,发现不可用了,运行avd manager和sdk manager没反应,搜了好多文章,然后看到了下这篇文章<关于sdk更新Android SD ...