页面较长时,使用返回顶部按钮比较方便,在电商中必备操作。下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可。

$(function () {
$("body").append($("<div id='totop'></div>"));
$("#totop").hide();
$(window).scroll(function () {
if ($(window).scrollTop() > ) {
$("#totop").fadeIn();
}
else {
$("#totop").fadeOut();
}
});
$("#totop").click(function () {
$('body,html').animate({ scrollTop: }, );
return false;
});
window.onload = function () {
$(window).scroll();
};
});

css:

/*回到顶部*/
#totop{
background:url(/themes/default/images/top_bg.png) no-repeat left top;
width:40px ;height:40px;
position:fixed;
left:%;bottom:%;
margin-left:605px;
}
#totop:hover{
background:url(/themes/default/images/top_bg.png) no-repeat left -40px;
cursor:pointer
}

jQuery返回顶部代码的更多相关文章

  1. JavaScript/Jquery返回顶部代码

    <!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...

  2. jQuery返回顶部代码组件

    非原创,拿来修改,样式可自定义,div,img都可以,效果如下: 下载地址:http://files.cnblogs.com/files/EasonJim/jquery.topback.rar 项目相 ...

  3. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  4. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. jquery返回顶部,支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  6. jQuery返回顶部(精简版)

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  7. css 简单 返回顶部 代码及注释说明

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  8. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  9. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

随机推荐

  1. 「专题训练」Air Raid(HDU-1151)

    题目 在一个城市里有\(n\)个地点和\(k\)条道路,道路是无环的(也就是说一定可以二分染色--回路长度为偶数0),现在伞兵需要去n个地点视察,只能沿着路的方向走,问最少需要多少伞兵. 分析 这是什 ...

  2. JMeter常用元器件

    测试计划, 是整个工程的根节点, 可以取别名, 并添加注释, 里面的设置是全局变量: 线程组, 是一组线程的集合, 可以取别名, 并添加注释, 里面的设置只对本线程组有效: HTTP请求, 也就是取样 ...

  3. 三分钟小课堂-----------------docker(三)增删改查命令

    主要为docker容器的增删改查命令 1  创建容器: docker run   -it   --name 别名  image_name   /bin/bash --name 别名 -d 后台 -t ...

  4. linux部署MantisBT(三)部署MantisBT

    三.部署MantisBT 1.下载MantisBT https://www.mantisbt.org/download.php 2.将MantisBT安装包放在/apache/htdocs下并重命名为 ...

  5. 第一章 了解TCP/IP协议族

    第一章 了解TCP/IP协议族 1.1 TCP/IP协议族体系结构以及主要协议 IP和TCP协议对编写程序具有最直接的影响,后面的章节会详细的讲到. TCP/IP的体系结构有应用层,传输层,网络层,数 ...

  6. HDU - 6440(费马小定理)

    链接:HDU - 6440 题意:重新定义加法和乘法,使得 (m+n)^p = m^p + n^p 成立,p是素数.,且satisfied that there exists an integer q ...

  7. OpenMPI源码剖析3:try_kill_peers 和 ompi_rte_abort 函数

    接着上一篇的疑问,我们说道,会执行 try_kill_peers 函数,它的函数定义在 ompi_mpi_abort.c 下: // 这里注释也说到了,主要是杀死在同一个communicator的进程 ...

  8. Python3实现机器学习经典算法(四)C4.5决策树

    一.C4.5决策树概述 C4.5决策树是ID3决策树的改进算法,它解决了ID3决策树无法处理连续型数据的问题以及ID3决策树在使用信息增益划分数据集的时候倾向于选择属性分支更多的属性的问题.它的大部分 ...

  9. Python3 小工具-UDP扫描

    from scapy.all import * import optparse import threading def scan(target,port): pkt=IP(dst=target)/U ...

  10. 二 Capacity Scheduler 计算能力调度器

    官网的写的太难懂,参考:http://www.360doc.com/content/14/0603/14/14935022_383254798.shtml Capacity Scheduler 一种可 ...