JavaScript---快速回到页面顶部

首先设置一个DOM元素:

<p id="back-to-top"><a href="#"><span></span>回到顶部</a></p>

然后绑定点击事件

$(document).ready(function () {
         //首先将#back-to-top隐藏
         $("#back-to-top").hide();
         //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
         $(window).scroll(function () {
             if ($(window).scrollTop() > 100) {
                 $("#back-to-top").fadeIn(1500);
             }
             else {
                 $("#back-to-top").fadeOut(1000);
             }
         });
         //当点击跳转链接后,回到页面顶部位置
         $("#back-to-top").click(function () {
             $(‘body,html‘).animate({ scrollTop: 0 }, 1000);
             return false;
         });
     });
时间: 2024-08-01 20:16:35

JavaScript---快速回到页面顶部的相关文章

网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效

之前看w3cshool上面,看到了a,name配合可以设置锚点,很多看书的网站上都用到,可以根据点击对应的目录章节,自动跳到具体的文字内容. 不过用锚点做的特效感觉很粗糙,不够平滑,总是一下子就跳到下面去了,没有给浏览者一种平滑的感觉.所以自己就计划着能不能做一种类似的比较平滑的效果呢? 当然是可以的.这篇博客中的特效要用到如下的函数和属性,大家没见过或者见过用过已经忘了的,可以到w3cshool上恶补下: eq(index):相当于数组吧,可以根据index索引到具体的对象 scrollTo(

常用小Demo:用js/jQuery实现回到页面顶部功能

HTML代码: <div class="main">     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate 

js实现简单的匀速回到页面顶部。

<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>回到顶部</title> <style> body{ height:1600px; } .top{ width:100%; height: 30px; background:red; } #box{ width:100px; height:30px; background: pink;

点击按钮,回到页面顶部的5种写法

1.锚点方式: 1 <body style="height:2000px;"> 2 <div id="topAnchor"></div> 3 <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a> 4 </body> 2.scrollTop:scrollTop属性表示被隐藏

今天才知道a标签的href=&quot;#&quot;是回到页面顶部

如题,真的是,做了一年多的开发,今天才知道a标签的href="#"是回到顶部.以前一直以为这是个多么了不起的功能. 顺便扩展一下滑动隐藏和显示按钮(从别处拷贝来的代码) $( document ).on( "scroll", function () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; if ( scrollTop > 0 ) { $(&

jquery点击回到页面顶部方法

1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-jQuery- 回到顶部案例</title> <style> .bk-top-box { position: fixed; bottom: 40px; right: 10px; cursor: pointer; } </

解决点击a标签返回页面顶部的问题

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p{ 8 font-size: 400px; 9 } 10 </style> 11 </head> 12 <body> 13 <p&

用jquery实现小火箭到页面顶部的效果

恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下 代码和布局都很简单 <!DOCTYPE HTML> <html> <head> <style> #content{ height: 2000px ; width: 960px ; margin: 0 auto ; background-color: blue ; } #rocket{ width: 50px ; height:

解决点击空&lt;a&gt;标签返回页面顶部的问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 400px; } </style> </head> <body> <p>?</p> <a href=&quo