jQuery-使页面回到顶部

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 6     <title>back-top</title>
 7     <style type="text/css">
 8         #back-top{
 9             width: 40px;
10             height: 40px;
11             position: fixed;
12             bottom: 40px;
13             right: 20px;
14             border: solid gray;
15             text-align: center;
16             font-size: 14px;
17             cursor: pointer;
18         }
19
20         .contain {
21             margin: 0 auto;
22             width: 1000px;
23             height: 2000px;
24             background: red;
25             font-size: 400px;
26         }
27     </style>
28     <script src="jquery-3.4.1.js"></script>
29     <script>
30         $(function(){
31             $(‘#back-top‘).click(function(){
32                 // html，body取并级，处理浏览器兼容
33                 $("html,body").animate({
34                 scrollTop: 0,
35                 screenLeft: 0,
36                 }, 400);
37             });
38         });
39     </script>
40 </head>
41 <body>
42     <div id="back-top">回到顶部</div>
43     <div class="contain">这里是内容</div>
44 </body>
45 </html>

结果

原文地址：https://www.cnblogs.com/tynam/p/11037407.html

时间： 2024-11-10 14:33:05

jQuery-使页面回到顶部的相关文章

js——页面回到顶部

很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面回到顶部</title> <link rel="stylesheet&quo

页面回到顶部的实现及原理

转自:http://www.mojidong.com/html/css/js/2013/03/03/page-top-to-achieve/ 现在很多网页都有一个回到顶部的功能,当你拖动滚动条往下拉到一定程度就会在右下方显示一个回到顶部的按钮,点击则可以立即回到页面顶部,非常贴心的设计. 今天打算自己做一个,分析了一下,要点如下 监听当前页面滚动事件 当滚动到一定像素显示回到顶部的按钮 给回到顶部按钮绑定点击事件,点击按钮让滚动条回到顶部并隐藏按钮 核心点主要在js控制按钮的显示和隐藏及点击按钮

【JQ+锚标记实现点击页面回到顶部】

前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑着走的,还给小白挥了挥手,微笑一个.那句话叫什么来着,佛祖虽给你关了一扇门,说不定会再给你开一扇窗.明天我就换工作了,我感谢我的同学. a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方

jquery点击回到顶部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到顶部</title> <meta name="viewport" content="width=1200, maximum-scale=1.0, user-scalable=1"> <style&

页面回到顶部

js代码: function pageScroll(){ //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数) window.scrollBy(0,-100); //延时递归调用,模拟滚动向上效果 scrolldelay = setTimeout('pageScroll()',100); //获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTo

使用 jQuery 页面回到顶部

function backTop() { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#topImg").fadeIn(1000); } else { $("#topImg").fadeOut(1000); } }); //当点击跳转链接后,回到页面顶部位置 $("#topImg").click(function () { //考虑到兼容性使用 b

JS实现页面回到顶部效果

[代码] 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>home</title> 6 </head> 7 <style> 8 *{ 9 padding:0; 10 margin:0; 11 } 12 .box{ 13 width:1190px; /*只有设置了

页面回到顶部的三种实现(锚标记，js)

本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能. 本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(http://www.jb51.net/web/62651.html) 锚标记,也可使用Javascript Scroll (http://www.jb51.net/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选

【Delphi】FMX 如何设置 TVertScrollBox的滚动位置，使其回到顶部原点

在手机APP开发中, 纵向的滚动框非常实用,可以说是必不可少的控件,甚至为了自适应不同手机屏幕大小,使用滚动框是非常方便的懒人方法. 当我们使用TVertScrollBox控件时,发现除了控件内部封装好的自动化的触控滚动,还有一个方法ScrollBy可以调整滚动条位置,但实际中我们发现,ScrollBy是一个增量滚动的方法,即ScrollBy(0,10)代表向上滚动10个像素,FMX中的像素点并不是屏幕的硬件像素点,而是FMX内部的逻辑像素点,通过ScrollBy方法内部源码也可以知道,若需要滚