<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. RadioButtonList根据值触发OnSelectedIndexChanged事件

    Insus.NET有使用Iframe来处理另外一个站点的enter form,由于需要自动循环填入数据,免去人手操作.但是原来的Enter from有RadioButtonList控件以及OnSele ...

  2. 2017.12.21-JQuery

    作业:密码加强验证 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> & ...

  3. Java多线程--锁的优化

    Java多线程--锁的优化 提高锁的性能 减少锁的持有时间 一个线程如果持有锁太长时间,其他线程就必须等待相应的时间,如果有多个线程都在等待该资源,整体性能必然下降.所有有必要减少单个线程持有锁的时间 ...

  4. 使用eclipse上Tomcat插件配置域名、端口号、启动时间详解

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7856284.html 邮箱:moyi@moyib ...

  5. CF712E Memory and Casinos

    设\(f[i]\)为从\(i\)到\(r+1\)且不走出区间的概率 \(f[i]=p[i]f[i+1]+(1-p[i])f[i-1]\) \(f[i]-f[i-1]=p[i](f[i+1]-f[i-1 ...

  6. JSP内置对象——session对象

    举个购物流程的例子: 这整个购物过程,它是属于一次回话.那么这个session是保存在服务器内存当中,并且它保存着不同用户对应的session,一个用户对应一个session.看下面这幅图: 从图中可 ...

  7. android控件跟随手势滑动改变位置

    要求:1.通过手指移动来拖动图片   2.控制图片不能超出屏幕显示区域 技术点:1.MotionEvent处理2.对View进行动态定位(layout) activity_main.xml: < ...

  8. Intellij IDEA去除@Autowired下划线红色提示

    Intellij IDEA通过@Autowired注入的对象,在不改变配置的情况下一直有红色下划线,虽然不影响运行,但是跟小Alan一样有强迫症的肯定受不鸟. 那么怎么去除它呢? 解决方式:改变@Au ...

  9. 【Python】生成词云

    import matplotlib.pyplot as plt from wordcloud import WordCloud import jieba text_from_file_with_apa ...

  10. Oracle 与 mysql 建立透明网关

    1.1.1.   文档编写目的 项目上需要做与Mysql数据库的对接,然而Oracle与Mysql数据库是异构的,因此这里采用透明网关的方式来解决. 另,项目上的环境为APP:12.2.6 ; DB: ...