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 ...
随机推荐
- typescript入门,可以一起探讨提点意见互相学习。
typescript是js的一个超集,TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大 ...
- 北京Uber优步司机奖励政策(3月1日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 北京Uber优步司机奖励政策(1月1日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- spring源码-增强容器xml解析-3.1
一.ApplicationContext的xml解析工作是通过ClassPathXmlApplicationContext来实现的,其实看过ClassPathXmlApplicationContext ...
- Omad群组部署、依赖部署一键解决
本文来自网易云社区 作者:李培斌 前言 基于omad部署平台实现一键部署的实践已有很多成功的经验,杭研QA的技术先锋们也在ks圈里有很多不同的文章去阐述关于这类需求的实现和思路,当然包括我们金融事业部 ...
- 在ubuntu trusty下安装python的rasterio库
就这些吧.. apt-get update -y apt-get install -y software-properties-common add-apt-repository ppa:ubuntu ...
- andriod 学习三 使用android资源
3.1 android框架中有许多资源,包括布局,字符串,位图,图片....,使用资源之前需要在相应的资源文件中定义资源,然后编译程序时ADT将定义的资源转换成java类并给予唯一的id,而代码中需要 ...
- svn清理报错:Cleanup failed to process the following paths
这里碰到svn更新时,提示清理,清理时报错: 只需进行以下几个步骤即可解决:(原理即是清除掉svn数据库里的lock记录) 1.下载SQLiteManager,svn用的是sqlite数据库,需要一款 ...
- ASP.NET中Gridview一些技巧
ASP.NET中Gridview一些技巧 一.后台覆盖掉Gridview中自动填充的值 我们可以再Gridview中的事件触发的过程中修改其中的值,而这些值将会在具体的运行过程中覆盖掉那些自动属性.这 ...
- MVC数据的注册及验证简单总结
一.注解 注解是一种通用机制,可以用来向框架注入元数据,同时,框架不只驱动元数据的验证,还可以在生成显示和编辑模型的HTML标记时使用元数据. 二.验证注册的使用 1.Require:属性为Null或 ...