html网页实现返回顶部,网页内容实现太长实现返回顶部的代码

红太狼 2022-10-07 15:58 206阅读 0赞

返回顶部

var backTop = function(btnId)\{

var btn = document.getElementById(btnId);

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

window.onscroll = set;

btn.onclick = function () \{

btn.style.display = "none";

window.onscroll = null;

this.timer = setInterval(function () \{

//console.log(document.body.scrollTop)

//console.log(document.documentElement.scrollTop)

if( document.body.scrollTop )\{

document.body.scrollTop -= Math.ceil(document.body.scrollTop \* 0.1);

\}else\{

document.documentElement.scrollTop -= Math.ceil(document.documentElement.scrollTop \* 0.1);

\}

if (document.body.scrollTop == 1) clearInterval(btn.timer), window.onscroll = set, document.body.scrollTop = 0;

if (document.documentElement.scrollTop == 1) clearInterval(btn.timer), window.onscroll = set, document.documentElement.scrollTop = 0;

\}, 10);

\};

function set() \{ btn.style.display = (document.documentElement.scrollTop || document.body.scrollTop) ? ‘block‘ : "none" \}

\};

backTop(‘gotopbtn‘);

将上面代码直接复制到最后的

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关实现一个简单的返回顶部示例

思路：要实现一个点击后能返回顶部的按钮，首先得创建一个容器，并需要设置它的style\{overflow : auto\}。然后，我们需要给容器添加一个监听器，监听滚动事件，当

骑猪看日落/ 2023年10月14日 23:34/ 0 赞/ 46 阅读

相关返回顶部

\goTopBtn\{width:50px;height:50px;background:\2f6795;color:\fff;font-size:18px;position:

野性酷女/ 2023年07月25日 09:55/ 0 赞/ 18 阅读

相关 js实现页面滚动返回顶部

许多网站的右下角都有一个可以使页面返回顶部的按钮例如这些网站： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

我会带着你远行/ 2023年03月03日 13:25/ 0 赞/ 21 阅读

相关 html网页实现返回顶部,网页内容实现太长实现返回顶部的代码

返回顶部 var backTop = function(btnId)\{ var btn = document.getElementById(btnId); var d

红太狼/ 2022年10月07日 15:58/ 0 赞/ 207 阅读

相关 html一键返回顶部,HTML+CSS入门如何实现返回顶部

本篇教程介绍了HTML+CSS入门如何实现返回顶部，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。 < 页面右下角返回顶部 html 关于我们

太过爱你忘了你带给我的痛/ 2022年10月06日 03:59/ 0 赞/ 238 阅读

相关返回顶部

点击返回顶部，简单易学效果图： ![Center][] 第一步：将返回按钮fixed到具体位置后隐藏第二步：当浏览器滚动条大于多少像素时显示按钮，小于多少时隐

拼搏现实的明天。/ 2022年08月18日 12:23/ 0 赞/ 332 阅读

相关 jquery实现返回顶部效果

jQuery("\gotop").css('display','none');jQuery(window).scroll(function()\{if(jQuery(this)

我就是我/ 2022年08月04日 13:52/ 0 赞/ 285 阅读

相关返回顶部模仿天猫的返回顶部代码 HTML JQuery CSS JavaScript

关于返回顶部这个功能，绝大部分网站都有用到，算是一个细节方面的小东西，个人觉得天猫的返回顶部这个小东西做的挺好，下面便是我模仿它的代码： HTML： </!DOCT

╰+哭是因爲堅強的太久メ/ 2022年06月18日 08:07/ 0 赞/ 306 阅读

相关 Web JS实现页面返回顶部

![右下角“返回顶部“按钮][1240] > > 之前写博客的时候加了个返回顶部的功能 > > 采用js的scrollTop属性实现了一下这个简单的功能当页面特别长的时

超、凢脫俗/ 2022年06月17日 00:54/ 0 赞/ 366 阅读

相关 JavaScript原生代码实现返回顶部缓动效果

返回顶部比较特殊，需要使用，widow.scrollTo(x,y )去做先贴上全部代码，分析在下面 <!doctype html> <html la

爱被打了一巴掌/ 2022年06月01日 06:51/ 0 赞/ 298 阅读