js简单的返回顶部
1、一般这种都伴随着浏览器离开顶部后出现回到顶部的div,然后点击div回到顶部,然后判断你的页面处于浏览器顶部,隐藏你的回到顶部按钮,需要去判断你的浏览器是否位于顶部csdn的回到顶部按钮2、我实现的思路比较简单,写一个透明的,高度只有1像素的div放在最顶上,让js判断浏览器窗口的高度是否大于div的高度,大于就显示你的回到顶部,小于就隐藏3、写一个用来回滚到顶部的按钮,设置样式并固定它在你想
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()有兼容性问题,如果你有更好的方法就不要用这个,只不过这个写起来简单点
更多推荐
所有评论(0)