在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮，点击即返回顶部。

方法一： 锚点，这是最简单的。（a标签的href属性等于一直要到达位置元素的id值）

方法二： js直接给页面根节点设置scrollTop为0。

// 兼容写法

document.body.scrollTop = 0；

document.documentElement.scrollTop = 0;

But，以上都是直接返回，不带任何过渡效果。作为有追求的前端，这太low了。

以下提供两种带过渡效果的原生方法和一种jquery方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        li { height: 100px;border-bottom: 1px solid #ccc; }

        #toTop {display: none;position: fixed;right: 20px;bottom: 20px; background: #ccc; border-radius: 5px;padding: 10px 15px;}

    </style>

</head>

<body>

    <div class="demo" style="height: 2000px;">

        <ul>

            <li>demo1</li>

            <li>demo2</li>

            <li>demo3</li>

            <li>demo4</li>

            <li>demo5</li>

            <li>demo6</li>

            <li>demo7</li>

            <li>demo8</li>

            <li>demo9</li>

            <li>demo10</li>

        </ul>

    </div>

    <div id="toTop">back</div>

</body>

</html>
<script>
　　 //  匀速返回 （定时器开启前速度已经计算好）

    var toTop = document.querySelector('#toTop')

    toTop.onclick = function(){

        var dom = document.querySelector('body');

        var h = dom.scrollTop;

        var subH = parseInt(h / 50);

        var timer = setInterval(function(){

            h -= subH;

            if(h <= 0){

                dom.scrollTop = 0;

                clearInterval(timer);

            }else{

                dom.scrollTop = h;

            }

        },1)

    }

    window.onscroll = function(){

        if(window.pageYOffset>300){

            toTop.style.display = "block";

        }else{

            toTop.style.display = "none";

        }

    }

</script>
function goTop() {
　　　　　// 由快到慢  （每次开启定时器都重新计算速度）

        timer = setInterval( function(){

            //获取滚动条的滚动高度

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            //用于设置速度差，产生缓动的效果

            var speed = Math.floor(-scrollTop / 8);

            document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed;//用纯数字赋值

            isTop =true;  //用于阻止滚动事件清除定时器

            if(scrollTop == 0){

                clearInterval(timer);

            }

        },50 );

    }

另外，jQuery实现方式如下

<script>

    $(function(){

        $(window).on("scroll",function(){

            var display = window.pageYOffset > 300 ? "block" : "none";

            $("#toTop").css("display",display);

        });

        $("#toTop").on("click",function(){

            $("body").animate({

                "scrollTop": 0

            },300);

        })

    })

</script>

原生js返回顶部（匀速、由快到慢）的更多相关文章

  1. 原生JS返回顶部，带返回效果

    有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要 ...

  2. 原生js返回顶部

    let backToTop = function() { let scrollToptimer = setInterval(function() { let top = document.body.s ...

  3. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  4. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  5. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  6. js返回顶部小Demo

    <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...

  7. js返回顶部

    1. function scrollTop(){ $(},); } 2. $("#side-bar .gotop").click(function(){ $(},); //返回顶部 ...

  8. js 返回顶部

    <script> window.onload = function(){ var oTop = document.getElementById("to_top"); v ...

  9. 原生js回到顶部

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

随机推荐

  1. WCF 学习总结1 -- 简单实例

    从VS2005推出WCF以来,WCF逐步取代了Remoting, WebService成为.NET上分布式程序的主要技术.WCF统一的模型整合了以往的 WebService.Remoting.MSMQ ...

  2. ADO.NET 【攻击及防御】

    sql字符串注入攻击 SQL注入攻击是黑客对数据库进行攻击的常用手段之一.SQL注入的手法相当灵活 SQL注入攻击会导致的数据库安全风险包括:刷库.拖库.撞库. 一般来说,SQL注入一般存在于形如:H ...

  3. Proud Merchants（01背包变形）hdu3466

    I - Proud Merchants Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u ...

  4. 【C#数据结构系列】线性表

    一:线性表 1.1:定义:零个或多个数据元素的有限序列 1.2: 线性表元素个数n定义为线性表的长度,n = 0称为空表,i 为数据元素ai在线性表中的位序. 1.3:满足线性表的条件:(1):有序, ...

  5. 【15】模板方法模式（Template Method）

    一.引言 提到模板,大家肯定不免想到生活中的“简历模板”.“论文模板”.“Word中模版文件”等.在现实生活中,模板的概念就是——有一个规定的格式,然后每个人都可以根据自己的需求或情况去更新它.例如简 ...

  6. HDU4185(KB10-G 二分图最大匹配)

    Oil Skimming Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  7. SpringMVC—Struts2拦截器学习网址整理

    引自:http://blog.csdn.net/wp1603710463/article/details/49982683 SpringMVC—Struts2拦截器学习网址整理 最近项目中遇到权限相关 ...

  8. 【node＋小程序＋web端】简单的websocket通讯

    [node+小程序+web端]简单的websocket通讯 websoket是用来做什么的? 聊天室 消息列表 拼多多 即时通讯,推送, 实时交互 websoket是什么 websocket是一个全新 ...

  9. Impala随手记

    最近开始使用Impala,基本完全兼容传统SQL,并且查询速度飞快,是Hive的良好替代: 1.登录及简单查询 impala-shell #列出数据库 show databases; #载入数据库 u ...

  10. 排错-windows下 ORA-12560 TNS 协议适配器错误解决方法

    排错-windows下_ORA-12560 TNS 协议适配器错误解决方法 by:授客 QQ:1033553122 问题描述: 修改SQL*Plus窗口属性后,重新打开SQL*Plus时出现ORA-1 ...