html返回顶部_Jquery实现一键返回顶部

一、需求分析

当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面本站的返回顶部的效果，分享给大家：

Jquery

二、示例代码

HTML代码：

CSS代码

#Back-to-the-top { width: 50px; height: 50px; position: fixed; right: 50px; bottom: 25%; background-color: #FFF; cursor: pointer; display: none;}#Back-to-the-top .layui-icon { font-size: 50px; color: #333;}

Jquery代码：

// 返回顶部window.onscroll = function() { scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; $("#Back-to-the-top").css("display

html返回顶部_Jquery实现一键返回顶部相关推荐

微信小程序实现一键返回顶部
1.实现效果 2.实现原理 onPageScroll事件,监听页面滚动事件,当页面滚动超过一定高度,显示出一键返回顶部的按钮. wx.pageScrollTo事件,实现一键返回顶部. 将页面滚动到目标 ...
html5 按钮回到顶部,html页面添加返回顶部按钮
html:css:.box {width: 100%;height: 100px;background: skyblue;}.box1 {width: 100% 利用 jQuery 中的 animat ...
layui fixbar 返回顶部_FANUC 数控系统机床返回参考点功能的应用研究
摘要:数控机床能精确控制零件的加工精度,而它的加工是要基于一个固定的参考点,而参考点的位置就是以机床出厂零点为基准的.通过研究使用 FANUC 数控系统的数控机床建立参考点的方式,研究返回参考点的三种 ...
cesium 设置地球默认区域为中国一键返回默认区域
直接上代码啦 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90); const ...
计算机怎么一键到桌面快捷键,关于添加一键返回桌面快捷键在win10电脑中的技巧...
我们在win10系统的操作中,对于电脑中需要操作到多个窗口和页面的情况是很多的,那有小伙伴在网络上提问不知道是不是可以添加一个返回桌面快捷键的情况,我们在win10电脑中打开的程序很多的话切换窗口也就 ...
Mac系统如何一键返回桌面？
在使用mac是,会不自觉的打开很多的应用程序,返回桌面的话如果一个一个关闭页面比较麻烦,之前windows系统直接按win+D即可返回到桌面.那么Mac系统如何一键返回桌面?那么请看小编整理的图文教程 ...
WIN11如何一键返回桌面
1.直接按同时下键盘上的**"WIN+D"快捷键,可以一键返回到桌面. 2.因为WIN11中的一键回到桌面被做成了一条线故需要准确点击在线上**也可以直接一键返回桌面.
告别繁琐滑动，微信小程序一键回到顶部功能
前言在日常使用微信小程序时,你是否曾经遇到过翻页疲劳的问题?或者在滑动页面时不断滑动才能回到顶部的尴尬情况?如果是这样,那么你一定不想错过今天的文章.我将为大家介绍一种简单而实用的方法,让你轻松实现 ...
vue3一键回到顶部方法
引入组件文件写一个文件放在components里面在需要时进行调用它但是呢 vue3当中怎么拿到呢请往下看 ============== content 这个文件是放在component的文件 ...

html返回顶部_Jquery实现一键返回顶部

html返回顶部_Jquery实现一键返回顶部相关推荐

最新文章

热门文章