• 首页>
  • 软件教程>
  • JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

2024-06-24 11:03:58阅读量：36 字体：大 中 小

现在网上的回到顶部组件，懂不懂就一大段让人看不懂javascript代码，还各种不兼容。起始这个组件，完全可以自己利用javascript的滚动事件window.onscroll与position：fixed手写。IE6的兼容性问题主要出现在position：fixed上面，如何解决已经在《【CSS】IE6中的position：fixed问题与随滚动条滚动的效果》介绍过了。

下面具体说说如何利用JavaScript中的滚动事件window.onscroll实现这个回到顶部组件。具体效果如下：

IE6：

JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

IE8：

FireFox：

首先是HTML+CSS的布局，在页面的最顶部布置一个id与name皆为page_top的作为锚点，之所以要共同设置id与name一切为了兼容。

然后就是在右下角放一个position：fixed的，内容为↑的div，当然你想搞得炫一点可以弄成一张图片，甚至搞成♂也可以，这个div一开始是隐藏的。

最后是一大堆没有意义的、占位置的

，没什么好说的。

之后的脚本部分，一切很明朗了：

仅有一个滚动事件window.onscroll，就是用户滚动滚动条就会触发这个时事件，var t = document.documentElement.scrollTop || document.body.scrollTop;能够兼容绝大部分浏览器，下面的t>=300是滚动条下滚300px之后，让top_div显示，这里用inline是以免block，会影响其它样式。

免责声明：

本文《JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件》版权归原作者所有,内容不代表本站立场！

如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。

推荐阅读

  • ipad pro怎么录屏

    ipad pro怎么录屏

    ipad pro设备有录屏的功能，有需要的用户可以去手机的控制中心内打开按键进行录屏，具体的操作步骤如下： ipad pro怎么录屏 1、进入手机的桌面中，从手机屏幕的右上角往下滑，呼出控制中心的界面...

    阅读: 1046

  • 苹果平板如何隐藏app软件

    苹果平板如何隐藏app软件

    苹果平板没有隐藏app软件的功能，但是可以把app下载到资源库中，这样就不会显示在平板的桌面上，操作方法如下： 苹果平板如何隐藏app软件 1、打开平板的设置，点击主屏幕”按钮，进入主屏幕...

    阅读: 870

  • 荣耀x30如何升级鸿蒙系统

    荣耀x30如何升级鸿蒙系统

    荣耀x30手机升级鸿蒙系统需要去手机的设置内进行手动点击升级，系统会自动进行检测，具体的操作步骤如下： 荣耀x30如何升级鸿蒙系统 1、打开手机的设置，点击系统和更新”按钮，进入系统设置中...

    阅读: 979

  • 手机淘宝首页布局怎么变了

    手机淘宝首页布局怎么变了

    手机淘宝首页布局变了可能是开启了长辈模式，开启长辈模式的布局就会改变，可以通过设置改回原来的布局，具体操作步骤如下： 手机淘宝首页布局怎么变了 1、打开淘宝app，点击我的淘宝，再点击右上角的齿轮进入...

    阅读: 972

  • 强制解除小红书实名认证

    强制解除小红书实名认证

    小红书账号一旦实名认证过了就不能解除实名认证了，只能通过注销账号的方式来解除实名认证。具体的操作方式如下： 强制解除小红书实名认证 1、打开小红书，点击进入我”的界面，再点击右上角的三条横...

    阅读: 924

  • 快手怎么买热门

    快手怎么买热门

    上了快手热门的视频可以推送给更多的用户，让视频得到更高的热度，在快手买热门的具体操作方式如下： 快手怎么买热门 1、打开快手，点击左上角的三条横线”，进入功能栏”界面。 2...

    阅读: 880

热门文章

最近更新