用jQuery实现返回页面顶部的功能

页面中有返回顶部的图标用起来使我们预览页面更方便，这个功能也是在网站中常见的功能，今天研究了一个简单的例子，用jQuery实现返回顶部的功能：

css代码如下：

*{ margin:0; padding:0;}
#backToTop{ position:fixed; bottom:10px; left:80px; _position: absolute;_left:80px; _bottom:auto;}
#backToTop a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:80px; -moz-transition:color 1s;
-webkit-transition:color 1s; -o-transition: color 1s; width:18px; background:#03F;}
#backToTop a:hover{ color:#979797;}

html代码如下：

</p

jQuery代码如下：

$(document).ready(function(){

setGoTopLocation();
   var backTop=$("#backToTop")
     backTop.hide();
$(function(){

   $(window).scroll(function(){
       if($(window).scrollTop()>100){
           backTop.fadeIn(1500);

           }
           else{
               backTop.fadeOut(1500);
               }
       })
       backTop.click(function(){
           $('body,html').animate({scrollTop:0},1000);

           })
   })
})

用jQuery实现返回页面顶部的功能相关推荐

如何通过HTML标记或JS代码实现跳转返回页面顶部
本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用JavaScript Scroll函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即 ...
返回页面顶部最简单方法
返回页面顶部最简单方法 <a href="#">返回页面顶部</a>
迅速返回页面顶部代码
<迅速返回页面顶部代码> <DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: p ...
11-微信小程序商城分类和产品产品页面顶部切换功能（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
产品页面顶部切换功能本节主要讲解产品详细页面中顶部切换界面和功能的实现,效果如图13-9所示. 1.布局分析结构布局分析示意如图13-10所示. 根据上面的布局分析,我们会产生基础的框架,代码示例 ...
点击返回页面顶部（h5、js、jQuery 三种方式）
当页面过长时,通常会在滚动条到一定位置时设置按钮,点击可以快速返回顶部或者指定的位置处. 参考文档:jQuery中页面返回顶部的方法总结方法一:锚点定位当点击a标签,会直接返回到顶部:如果p标签有 ...
js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
jquery返回页面顶部
本文转载自: https://www.cnblogs.com/eczhou/archive/2013/01/09/2852708.html 作者:eczhou 转载请注明该声明. 1.此博文图片样式引 ...
jQuery返回页面顶部代码
$(".goTop").click(function () {$("html, body").animate({"scroll-top":0 ...
javascript返回页面顶部_RobotFramework: 执行JavaScript语句
场景在做web项目时,通常需要开发一些自动化用例,自动化用例执行可以设置触发条件,也可以定时执行,在每次代码发生变更的情况下,自动触发自动化用例执行,可以及时检测修改代码是否引入新的问题,提高产品的 ...

用jQuery实现返回页面顶部的功能

用jQuery实现返回页面顶部的功能相关推荐

最新文章

热门文章