1、此博文图片样式引用腾讯网站,效果如下:

2、样式设置:

 #toTop {
/*选中的背景图片的大小*/
width: 54px;
height: 54px;
display: none;/*刚开始不显示*/
position: fixed;
right: 25px;/*距离右边大小值*/
bottom: 45px;/*距离底部大小值*/
/*选定图片区域*/
background-image: url(images/qqbg_1.5.5.png);
background-repeat: no-repeat;
background-position: -700px -110px;
opacity: 0.3; /*透明度*/
} #toTop:hover {
opacity: ;/*悬停时不透明*/
filter: alpha(opacity = );
}

3、JS代码:

 <a href="#" target="_self" id="toTop" title="返回顶部" onclick="window.scrollTo(0,0);return false"></a>
<script type = "text/javascript">
function toTopHide(){
$(document).scrollTop()>?
$("#toTop").show()
:$("#toTop").hide();
}
$(window).scroll(function(){toTopHide()});
</script>

jquery返回页面顶部的更多相关文章

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

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

  2. jquery返回滚动条顶部

    var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ ...

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

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

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

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

  5. jquery实现返回页面顶部功能。

    <p id="back-to-top"> <span></span> </p> <script type="text ...

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

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

  7. 【jQuery】页面顶部显示的进度条效果

    <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...

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

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

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

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

随机推荐

  1. 基于报错的SQL注入整理

    SQLServer 一.利用错误消息提取信息 输入 'having 1=1 --(having一般要与group by一起来使用,group by是用来进行分组的,having后面是用来进行判断的), ...

  2. luogu 1631 序列合并

    priority_queue的使用,注意 a[1]+b[1],a[1]+b[2],a[1]+b[3],a[1]+b[4].......a[1]+b[n] a[2]+b[1]......... .. a ...

  3. 通过Application传递数据

    1:通过Application传递数据 假如有一个Activity A, 跳转到 Activity B ,并需要推荐一些数据,通常的作法是Intent.putExtra() 让Intent携带,或者有 ...

  4. 2017-2018-2 20155303『网络对抗技术』Exp1:PC平台逆向破解

    2017-2018-2 『网络对抗技术』Exp1:PC平台逆向破解 --------CONTENTS-------- 1. 逆向及Bof基础实践说明 2. 直接修改程序机器指令,改变程序执行流程 3. ...

  5. Docker安装ActiveMQ

    ⒈下载 docker pull webcenter/activemq ⒉运行 docker run -d --name myactivemq -p 8161:8161 -p 61613:61613 - ...

  6. 恶意代码分析实战-x86反汇编速成班

    x86反汇编速成 x86体系结构 3种硬件构成: 中央处理器:负责执行代码 内存(RAM):负责存储所有的数据和代码 输入/输出系统(I/O):为硬盘.键盘.显示器等设备提供接口 内存 一个程序的内存 ...

  7. 四、Logisitic Regssion练习(转载)

    转载:http://www.cnblogs.com/tornadomeet/archive/2013/03/16/2963919.html 牛顿法:http://blog.csdn.net/xp215 ...

  8. 嵌入式Linux驱动笔记(十八)------浅析V4L2框架之ioctl【转】

    转自:https://blog.csdn.net/Guet_Kite/article/details/78574781 权声明:本文为 风筝 博主原创文章,未经博主允许不得转载!!!!!!谢谢合作 h ...

  9. (常用)time,datetime,random,shutil(zipfile,tarfile),sys模块

    a.time模块import time 时间分为三种形式1.时间戳 (时间秒数的表达形式, 从1970年开始)print(time.time())start_time=time.time()time. ...

  10. elk系统通过nginx添加对kibana的登录认证

    elk系统添加对kibana的登录认证 关于elk系统的安装配置可以参考:Centos6.5安装Logstash ELK stack 日志管理系统及使用详解 http://blog.csdn.net/ ...