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. mono for android代码记录1 WebClient Post数据到Nopcommerce(post数据到MVC5)

    WebClient Post数据到Nopcommerce(post数据到MVC5) 注意事项 1.把[ValidateAntiForgeryToken]注释掉,以后再处理CSRF攻击.现在学习先不理 ...

  2. Nmcli 网络管理命令行工具基础

    介绍 在本教程中,我们会在CentOS / RHEL 7中讨论网络管理命令行工具NetworkManager command line tool,也叫nmcli.那些使用ifconfig的用户应该在C ...

  3. div+css实现各种形状(精心整理)

    1.正方形.div {width: 100px;height: 100px;background: red;} 2.矩形.div {width: 200px;height: 100px;backgro ...

  4. Dynamic CRM 2013学习笔记(四十二)流程5 - 实时/同步工作流(Workflow)用法图解

    实时工作流跟插件一样,也是用事件执行管道来执行,能在pre,post或核心操作中执行.跟插件一样,不能在创建之前和删除之后执行.如果执行过程中有异常发生,会取消并回滚整个操作.实时工作流里所有的活动和 ...

  5. JQuery中动态生成元素的绑定事件(坑死宝宝了)

    今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...

  6. 第十二章:Android数据存储(下)

    一.SQLite介绍 提到数据存储问题,数据库是不得不提的.数据库是用来存储关系型数据的不二利器.Android为开发者提供了强大的数据库支持,可以用来轻松地构造基于数据库的应用.Android的数据 ...

  7. 从源代码分析Android-Universal-Image-Loader图片下载技巧

    在手机上尤其需要考虑网络对图片下载的影响,常见的情况是在2G网络.在3G网络需要不同的下载策略,也就是说在慢速网络与快速网络中下载需要考虑不同的策略.一种常见的策略就是Android客户端和服务端相配 ...

  8. Android开源项目分包方式学习(eoe、oschina、github)

    总感觉Android中关于分包的文章很少,或者几乎可以说没有.但是合理地分包,又可以使整个项目模块化,减少包与包之间的依赖,让整个项目的框架更加清晰,更利于后续功能的拓展. 因为没有相关的文章,所以这 ...

  9. CentOS升级MySQL到5.5

    centOS的yum安装的MySQL是5.1版本,可通过官方的rpm包安装5.5版本 # 查看安装的相关项 rpm -qa|grep -i mysql # 停止服务 service mysqld st ...

  10. [MFC] MFC编译程序,缺少MFC动态链接库的解决

    问题:VS2010 c++编写的程序在别人的机子运行不了,缺少mfc100u.dll xxx100d.dll等的解决方法   解决方法: 1.将这些dll打包,和应用程序一起发布; 2.采用MFC静态 ...