页面较长时,使用返回顶部按钮比较方便,在电商中必备操作。下面自己制作一个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. 安装cuda9.0+cudnn v7+python3.5.3+tensorflow

    本机设备 windows10 gtx1060 安装软件及下载地址 python-3.5.3-amd64  链接:https://pan.baidu.com/s/1I3oIDatMgvDLEtaPtvu ...

  2. 结合《需求征集系统》谈MVC框架

    结合<需求征集系统>分析MVC框架. 六个质量属性: 可用性:在系统压力过大时,会提示系统繁忙. 可修改性:使用配置文件,修改配置文件即可.对于一些公共的方法,进行封装,修改时,只需修改封 ...

  3. 北京Uber优步司机奖励政策(9月28日~10月4日)

    用户组:优步北京人民优步A组(适用于9月28日-10月4日) 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不 ...

  4. QtChart 初体验

    早就知道 Qt 5.7 中引入了 QtChart 模块.一直没时间试用.周末正好空闲,就简单的试了试 QtChart.QtChart 学起来还是挺简单的,基于 Qt Graphics View Fra ...

  5. ogg的安装配置 配置双向同步(含DDL)

    第一部分 先配置单向同步(含DDL) 一 源端安装GoldenGate 创建用户 创建目录 mkdir -p /opt/ogg chmod -R 777 /opt/ogg chown -R oracl ...

  6. android学习七 菜单

    1.菜单分类 常规菜单 子菜单 上下文菜单 图标菜单 辅助菜单 交替菜单 2.菜单类 andriod.view.menu   3.菜单的参数     名称:字符串标题     菜单ID:整数     ...

  7. 硬盘基础知识&&分区

    学习记录的笔记,虽然毫无章法 硬盘基础知识 磁盘的物理组成 如下图所示: 有关磁盘物理知识的详细介绍请看硬盘的存储原理和内部架构这篇博文 硬盘接口类型 IDE SATA SCSI SAS 光纤通道 I ...

  8. Machine Learning笔记整理 ------ (二)训练集与测试集的划分

    在实际应用中,一般会选择将数据集划分为训练集(training set).验证集(validation set)和测试集(testing set).其中,训练集用于训练模型,验证集用于调参.算法选择等 ...

  9. Too many open files错误与解决方法

    致前辈:该问题的解决思路给了我很大的启发,文章作者Lis, Linux资深技术专家. 问题现象:这是一个基于Java的web应用系统,在后台添加数据时提示无法添加,于是登陆服务器查看Tomcat 日志 ...

  10. [git] Git in Practice

    Work flow with git and github Work with Remotes Check the current status git status Check the latest ...