HTML:
<div id="goTop">
<a href="#top"><img src="~/Content/themes/base/images/ico_top.gif" alt="回到页首" title="回到页首 Top"></a>
</div>
CSS:
#goTop {
bottom: 15px;
margin: 0 auto;
position: fixed; //固定定位
margin-left: 945px;
} JS:
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#goTop").fadeIn(1500);
}
else {
$("#goTop").fadeOut(1500);
}
}); //当点击跳转链接后,回到页面顶部位置 $("#goTop").click(function () {
$('body,html').animate({ scrollTop: 0 }, 1000);
return false;
});
});

JS回到顶部代码小记的更多相关文章

  1. 兼容IE,chrome 等所有浏览器 回到顶部代码

    今天在博客园看到一片帖子回到顶部代码,索性就看了下,但是发现在非IE浏览器下可以运行,在IE浏览器下却运行不了. 故将其代码搬弄过来做了些许修改后,完美支持了IE下的运行. 主要实现功能代码文件: & ...

  2. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  3. js回到顶部------转载

    [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...

  4. listView从底部回到顶部代码实现

    可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...

  5. js回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生js回到顶部

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. css+js回到顶部

    .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...

  8. jquery方法回到顶部代码

    <style> /*默认样式,主要是position:fixed实现屏幕绝对定位*/ #gotoTop{display:none;position:fixed;top:75%;left:5 ...

  9. js回到顶部 动画速度 (自己记录)

    x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...

随机推荐

  1. Cisco ASA intra-interface routing

    LAN1和LAN2的默认路由指向各自的ASA,各ASA中设置对方LAN的静态路由指向ROUTER,打开ASA的intra-interface traffic,关闭LAN1和LAN2地址互相访问的NAT ...

  2. Linux内核--网络栈实现分析(一)--网络栈初始化

    本文分析基于内核Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7488828 更多请看专栏, ...

  3. 开源IP代理池续——整体重构

    开源IP代理池 继上一篇开源项目IPProxys的使用之后,大家在github,我的公众号和博客上提出了很多建议.经过两周时间的努力,基本完成了开源IP代理池IPProxyPool的重构任务,业余时间 ...

  4. Android View 如何测量

    对于Android View的测量,我们一句话总结为:"给我位置和大小,我就知道您长到那里". 为了让大家更好的理解这个结论,我这里先讲一个日常生活中的小故事:不知道大家玩过&qu ...

  5. Oracle数据创建表空间

    一.直接在服务器端通过sqlplus命令行创建: 如果您用的是Linux系统,那么Oracle用户名为oracle.同时,您是在oracle服务器上操作. 如果是在Windows系统下, 请先点击“开 ...

  6. “System.Web.UI.WebControls.Literal”不允许使用子控件

    今天在写下面的代码时遭遇错误——“System.Web.UI.WebControls.Literal”不允许使用子控件('System.Web.UI.WebControls.Literal' does ...

  7. C#修改文件权限

    用户名的格式为:Local MachineName\AccountName 机器名可通过System.Environment.MachineName获取. 获取一个文件的权限(帐号)列表 FileSe ...

  8. linux tar order

    http://blog.csdn.net/imyang2007/article/details/7634470 把常用的tar解压命令总结下,当作备忘: tar -c: 建立压缩档案-x:解压-t:查 ...

  9. Atitit.java expression fsm 表达式分词fsm引擎

    Atitit.java expression fsm 表达式分词fsm引擎 C:\0workspace\AtiPlatf_cms\src\com\attilax\fsm\JavaExpFsm.java ...

  10. Jsp技术总结

    这节我们总结一下Jsp的相关技术. 1. 什么是JSP JSP即Java Server Pages,它和servlet技术一样,都是sun公司定义的一种用于开发动态web资源的技术.该技术的最大特点在 ...