html匀速回到顶部,原生js返回顶部（匀速、由快到慢）

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

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

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

// 兼容写法

document.body.scrollTop = 0；

document.documentElement.scrollTop = 0;

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

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

Document

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;}

• demo1
• demo2
• demo3
• demo4
• demo5
• demo6
• demo7
• demo8
• demo9
• demo10

back

// 匀速返回 (定时器开启前速度已经计算好)

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";

}

}

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实现方式如下

$(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);

})

})

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

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

原生js返回顶部

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

js返回顶部封装 简洁

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

详解原生JS回到顶部

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

js返回顶部效果

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

js返回顶部小Demo

js返回顶部

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

js 返回顶部

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

原生js回到顶部

随机推荐

SharePoint 2013 Excel Services REST API介绍

前言:Excel Services 中的 REST API 是 Microsoft SharePoint Server 2010 的新增项.利用 REST API,可通过 URL 直接访问工作簿部件或 ...

JavaWeb chapter 4 Servlet处理HTTP请求

1.  GET/POST提交方法: 用户在网页上点击一个超链接:(get) 用户提交在网页上提交表单:(post或者get) 用户在浏览器地址栏输入URL地址并回车(get) 2.  默认情况下都是使 ...

CloudStack采用spring加载bean&lpar;cloud-framework-spring-module模块&rpar;

CloudStackContextLoaderListener /* * Licensed to the Apache Software Foundation (ASF) under one * or ...

439&period; Segment Tree Build II

最后更新 08-Jan-2017 开始介绍线段树的主要作用了,可以快速在区间查找极值,我猜是这样的..... 一个NODE的最大值取决于它左边和右边最大值里大 按个,所以,所以什么?对了,我们该用po ...

vbs 获取当前目录的实现代码

CMD当前路径 复制代码 代码如下: test = createobject("Scripting.FileSystemObject").GetFolder(".&quo ...

css 实现多行文本末尾显示省略号

思路: 省略号使用绝对定位添加,开头部分避免突兀使用c3渐变背景颜色

TZOJ 3305 Hero In Maze II&lpar;深搜&rpar;

描述 500年前,Jesse是我国最卓越的剑客.他英俊潇洒,而且机智过人^_^.突然有一天,Jesse心爱的公主被魔王困在了一个巨大的迷宫中.Jesse听说这个消息已经是两天以后了,他急忙赶到迷宫,开 ...

Liunx-history命令

1. 查看历史命令执行记录 2. 查看命令cd 的历史执行记录 3. 执行历史记录中,序号为1的命令

关于Keil C关键字xdata和data的问题

1.xdata表示这是一个外部RAM地址内的数据,数据最终将被保存至外部RAM的某个地址单元中:但是,外部RAM只能通过寄存器间接寻址来访问,也就是说,其地址需要保存在内部RAM中(其实或许是SFR中 ...