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. Javaweb学习笔记——(八)——————常见系统体系结构,Tomcat,以及web的内部外部应用,http协议概述

    ·软件系统体系结构: 1.常见软件系统体系结构B/S.C/S C/S 1.C/S结构即客户端/服务器(Client/Server),列如QQ: 2.需要编写服务器端程序,以及客户端程序,列如我们安装的 ...

  2. wpc 双工

    在控制台部署wcf双工 这个可以被silverlight 使用 <?xml version="1.0" encoding="utf-8" ?> &l ...

  3. CentOS6.8安装配置sonarqube6.4

    下载最新版本的sonar(现在改名叫sonarqube) https://www.sonarqube.org/downloads/ 我下载的版本是Sonarqube6.4        1 使用前需要 ...

  4. keepalived高可用系列~通用基础

    简介:今天咱们来聊聊keepalived一 keepalived 架构 1  标准架构: keepalived+lvs/haproxy+后端 real server(mysql从库,nginx.myc ...

  5. 阿里云apache服务器外网无法访问(配置安全组,添加80服务)

    CentOS的系统 ,已经安装好了 apache php mysql 常规排错过程(ps:没耐心的童鞋请直接看最后一步,学习在阿里云控制台配置 安全组,允许 http服务) 第一步:检查apache ...

  6. jmeter中实现java请求实战日志

    view code public class JdbcInsert implements JavaSamplerClient { // 全局变量 PreparedStatement pstmt; Co ...

  7. 《TCP/IP 详解 卷1:协议》第 3 章:链路层

    在体系结构中,我们知道:链路层(或数据链路层)包含为共享相同介质的邻居建立连接的协议和方法,同时,设计链路层的目的是为 IP 模块发送和接受 IP 数据报,链路层可用于携带支持 IP 的辅助性协议,例 ...

  8. Springboot分模块开发

    这是个spring cloud项目,service-base:基础服务:service-config:配置中心:service-entity:实体类: service-gateway:服务网关:ser ...

  9. Map<String,String>集合的四种遍历方式 其中有一种针对大容量的数据集合

  10. OCM_第五天课程:Section2 —》AGENT 的安装 、GC 的使用

    注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...