1、一般这种都伴随着浏览器离开顶部后出现回到顶部的div,然后点击div回到顶部,然后判断你的页面处于浏览器顶部,隐藏你的回到顶部按钮,需要去判断你的浏览器是否位于顶部

csdn的回到顶部按钮

2、我实现的思路比较简单,写一个透明的,高度只有1像素的div放在最顶上,让js判断浏览器窗口的高度是否大于div的高度,大于就显示你的回到顶部,小于就隐藏

3、写一个用来回滚到顶部的按钮,设置样式并固定它在你想要固定的高度上(浏览器窗口)

4、写一个div撑开浏览器高度(页面原来够高出现滚动条忽略这个)

5、js部分,先获取到用于识别浏览器滚动的1像素的div,然后是你要实现点击的按钮,接着给你的1像素的div写个display:none,让它先处于隐藏状态

6、添加一个滚动事件。控制台打印确定没问题

7、注释掉控制台输出,这里实现的思路为if语句判断你的窗口高度是否大于你的1像素div的高度,大于就设置你的回到顶部按钮为显示,否则就隐藏

8、最后我们来实现回到顶部的功能,给回到顶部写个点击事件,然后给body添加scrollIntoView(),这个方法是将元素滚动到用户可视化区域

9、behavior可以定义上或下,如smooth是元素平滑的滚动到与用户视图窗口顶部齐平的地方,底部齐平即end,后面的block是动画

10、最后有一个很重要的事情就是这个scrollIntoView()有兼容性问题,如果你有更好的方法就不要用这个,只不过这个写起来简单点

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐