纯js实现页面返回顶部的动画

啥也不说了,直接上代码

1    var scrollTop = document.body.scrollTop;
2    document.body.style.marginTop = -scrollTop + ‘px‘;
3    document.body.scrollTop = 0;
4    document.body.style.transition = ‘all 1s ease-in-out‘;
5    document.body.style.marginTop = 0;
6    setTimeout(function () { document.body.style.transition = ‘none‘; }, 1000);

需要的请随意拿走....

时间： 2024-10-20 20:14:17

纯js实现页面返回顶部的动画的相关文章

这是一个小小的功能,jQuery实现的话很简单,即animate()方法,特地记录一下. 首先贴一下返回顶部的功能代码: 方法一: 1 $(function(){ 2 $("#toTop").click(function(){ 3 $("html").animate({"scrollTop": "0px"},100); //IE,FF 4 $("body").animate({"scrollTop

js+JQuery实现返回顶部功能

在HTML头部添加 <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 然后 jquery 中写入 <script> $(function () { //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 $(function () {

纯JS搜索页面内容-我的扩展版本

我扩展了什么? 1.不区分大小写,且替换后保留原大小写内容. 2.自动滚动到所属位置. 时间比较赶也比较粗糙. 原作张鑫旭 ------- ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

JS实现页面回到顶部效果

[代码] 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>home</title> 6 </head> 7 <style> 8 *{ 9 padding:0; 10 margin:0; 11 } 12 .box{ 13 width:1190px; /*只有设置了

原生js，实现“返回顶部”效果

html: <span>^</span> css body{ height: 3000px; } span{ display: block; position: fixed; bottom: 20px; right: 10px; font-size: 60px;

页面返回顶部

html标签: 锚链接 <style> #goTop{ display:block; position: fixed; bottom: 10px; right: 10px; width: 80px; height: 80px; border-radius: 40px; background-color: gray; cursor: pointer;} </style> <a id="goTop" href="#topHref">&

安卓.点击头像-->编辑个人姓名-->提交后.同时调用js关闭页面-->返回上一层

$(document).ready(function() { $('#selfbtn').click(function(){ var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机 TripMobile.closeCurrentWindow(); } else if (u.indexOf('iPhone') > -1) { //苹果手机 /*$(&quo

js返回顶部效果

当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了.下面我总结了集中常用的返回顶部的效果: 方法一(最简单,代码量最少,但是效果有些生硬).代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <