jQuery返回顶部代码
页面较长时,使用返回顶部按钮比较方便,在电商中必备操作。下面自己制作一个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返回顶部代码的更多相关文章
- JavaScript/Jquery返回顶部代码
<!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...
- jQuery返回顶部代码组件
非原创,拿来修改,样式可自定义,div,img都可以,效果如下: 下载地址:http://files.cnblogs.com/files/EasonJim/jquery.topback.rar 项目相 ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- qq空间返回顶部代码
点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- jquery返回顶部,支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
- jQuery返回顶部(精简版)
jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- css 简单 返回顶部 代码及注释说明
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- jQuery返回顶部实用插件YesTop
只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
随机推荐
- 青岛Uber优步司机奖励政策(1月4日~1月10日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- LeetCode:40. Combination Sum II(Medium)
1. 原题链接 https://leetcode.com/problems/combination-sum-ii/description/ 2. 题目要求 给定一个整型数组candidates[ ]和 ...
- solr 学习
点击dataimport 没有handler数据 重启下 tomcat 如果没有权限 Cannot find ./catalina.shThe file is absent or does not ...
- 深入解析UUID及其应用(转载)
UUID 编辑 UUID含义是通用唯一识别码 (Universally Unique Identifier),这 是一个软件建构的标准,也是被开源软件基金会 (Open Software Founda ...
- 解决replace格式替换后光标定位问题
场景:格式化银行卡444格式 手机号344格式 身份证号684格式 校验数据格式,replace后光标定位错乱 或光标一直定位在最后 解决,只针对input,代码用的vue: 获取光标位置: getC ...
- div布局方案整理
实际项目开发过程中遇到页面 DIV 左右布局的需求:左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面,由此引申出本文的几种解决方案 1 左侧 DIV 设置 float 属性为 left ...
- selenide 自动化测试进阶一: 查找元素和相关操作
基础环境配置和举例请移步:https://www.cnblogs.com/davice/p/9298742.html 提到自动化有些测试同学就会问,我会使用工具录制做自动化,我会用工具或插件识别元素. ...
- JavaScript 作用域链范例
函数在执行的过程中,先从自己内部找变量 如果找不到,再从创建当前函数所在的作用域去找,以此往上 注意找的是变量的当前状态 范例 例1 var a=1 function fn1() { function ...
- nginx web服务器的安装使用
nginx是一个web服务器(高性能web服务器),类似于apache服务器和iis服务器,由于nginx服务器具有轻量级高并发的特点,目前nginx的使用已经超越了apache. nginx介绍:n ...
- LeetCode - 13. Roman to Integer - 思考if-else与switch的比较 - ( C++ ) - 解题报告
1.题目: 原题:Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range ...