jQuery实现返回顶部功能

 1 <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
 2 <script>
 3 $(function(){
 4         //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
 5         $(function () {
 6             $(window).scroll(function(){
 7                 if ($(window).scrollTop()>100){
 8                     $("#back-to-top").fadeIn(1500);
 9                 }
10                 else
11                 {
12                     $("#back-to-top").fadeOut(1500);
13                 }
14             });
15
16             //当点击跳转链接后,回到页面顶部位置
17
18             $("#back-to-top").click(function(){
19                 $(‘body,html‘).animate({scrollTop:0},1000);
20                 return false;
21             });
22         });
23     });
24 </script>
时间: 2024-12-26 00:21:31

jQuery实现返回顶部功能的相关文章

使用jQuery实现返回顶部功能

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可

js+JQuery实现返回顶部功能

在HTML头部添加 <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 然后 jquery 中写入 <script>        $(function () {            //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失            $(function () {    

jquery 实现返回顶部功能

1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scroll事件,即发生scroll事件,则进行按钮的显示隐藏的操作判断. 判断方法是:滚动条垂直高度大于某个值,则显示按钮(show()):否则则隐藏按钮(hide()): 3. 绑定点击返回顶部按钮的事件,给予一个动画,scroll到顶部(可以以body标签的位置作为参考) 例码如下: html: <d

jQuery实现返回顶部按钮功能

html结构 <div class="toolbar"> <a href="javascript:;" class="toolbar-item"> <span class="toolbar-btn" id="backtop"> <i class="toolbar-icon icon-upload2"></i> //图标字体 &l

jQuery实现返回顶部

由于项目需要,写了个返回顶部的小功能... 1 /*返回顶部*/ 2 function toTop() { 3 $(".to_top").hide(); 4 $(window).scroll(function(){ 5 var scroll_top = $(document).scrollTop(); 6 if(scroll_top != 0){ 7 $(".to_top").show(); 8 }else{ 9 $(".to_top").hid

页面返回顶部功能的实现

这是一个小小的功能,jQuery实现的话很简单,即animate()方法,特地记录一下. 首先贴一下返回顶部的功能代码: 方法一: 1 $(function(){ 2 $("#toTop").click(function(){ 3 $("html").animate({"scrollTop": "0px"},100); //IE,FF 4 $("body").animate({"scrollTop

一句jQuery代码返回顶部

效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/j

js&quot;返回顶部&quot;功能实现

JS代码: <script src="../../static/js/base/jquery/jquery.min.js"></script> <script>//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失$(function () { $("#sidepanel").fadeOut(100); $(window).scroll(function(){ if ($(window).scrollTop()>

jquery右下角返回顶部

实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置.要先引用jquery.min.js <script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script> html: <div id="back-to-top" style="displa