<p id="back-to-top">
<span></span>
</p>
<script type="text/javascript">
$(function() {
//首先将#back-to-top隐藏
$("#back-to-top").hide();
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > ) {
$("#back-to-top").fadeIn();
} else {
$("#back-to-top").fadeOut();
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function() {
$('body,html').animate({
scrollTop :
}, );
return false;
});
});
});
</script>
<style type="text/css">
p#back-to-top {
position: fixed;
bottom: 100px;
right: 80px;
cursor:pointer;
} p#back-to-top span {
background:url(skins/images/totop.gif) no-repeat center center;
border-radius: 6px;
display: block;
height: 80px;
width: 80px;
margin-bottom: 5px;
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
} #back-to-top span:hover {
background: url(skins/images/totop.gif) no-repeat center center;
}
</style>

不要忘记引入jquery库

jquery实现返回页面顶部功能。的更多相关文章

  1. 仿CSDN Blog返回页面顶部功能

    只修改了2个地方: 1,返回的速度-->改成了慢慢回去.(原来是一闪而返回) 2,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来.(原来是向下滚动500px后才显示) 注意:JS ...

  2. 代码: 返回页面顶部 jquery

    jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...

  3. HTML5商城开发五 实现返回页面顶部

    本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...

  4. react-router(v4) 路由跳转后返回页面顶部问题

    遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...

  5. jquery的返回顶端的功能实现

    页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用. 具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失. 实现效果如下图:

  6. js网页返回页面顶部的小方法

    咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. (转)解决点击a标签返回页面顶部的问题

    本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...

  9. 解决点击空<a>标签返回页面顶部的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [转]Build beautiful, responsive sites with Bootstrap and ASP.NET Core

    本文转自:https://docs.microsoft.com/en-us/aspnet/core/client-side/bootstrap?view=aspnetcore-2.1 Bootstra ...

  2. C++为啥要使用new

    1.为什么要有new? 为什么要有new?为什么要动态创建对象?为什么有时候不用new,有时候又用new,比如: // Cocos2d-x3.x的Value类,大家都很熟悉了 Value v = Va ...

  3. VB.NET工作记录

    1.字符串移除最后一个字符 s = s.Remove(s.Length - 1, 1) 2.日期格式 常用:yyyy-MM-dd HH:mm:ss 毫秒用fff 字符 说明 (:) 时间分隔符.在某些 ...

  4. SQL - 先安装SQL2008 R2后安装AD导致无法正常登陆数据库(无法启动MSSQLSERVER)

    分析原因:安装AD后,系统改为使用域用户登陆,原先安装SQL时设置的“本地用户”信息已经修改,当前(域)用户没有权限访问MSSQLSERVER实例文件夹或整个SQL文件夹. 解决方法: 1.打开“服务 ...

  5. python中强大优雅的列表推导表达式

    推导表达式其实就是简化一些循环判断操作等 生成一个数字1-10的列表,可以有多少种方法? >>> l = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] > ...

  6. babel 编译后 this 变成了 undefined

    最近有在用webpack,使用了babel这个模块来编译js jsx文件,但是发现文件编译后this变成了undefined. 源文件 module.exports = React.createCla ...

  7. [World Final 2016] Branch Assignment

    链接 PDF bzoj 先求出正置边和反置边时b+1到前b个点的最短路dis[0/1][x](x∈[1,b]), 令D[x]=dis[0][x]+dis[1][x] 然后分组后每个x对代价的贡献为D[ ...

  8. 安装php扩展包

    sudo apt-get install php5-gd curl libcurl3 libcurl3-dev php5-curl 重启Apache sudo service apache2 rest ...

  9. Jquery 只保留数字和小数点(正则)

    str.replace(/[^\d.]/g,"")

  10. js 事件委托代理

    在优化网页性能的技巧当中,对DOM的优化是必不可少的.这其中就涉及到了javascript对DOM的频繁操作.比如响应用户操作的事件.一般情况下,如果是稍微初级一点的前端程序员,在拿到项目的时候,对待 ...