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. 设计模式UML类图基础

    1.聚合 聚合(aggregation)表示一种弱的"拥有"关系,体现的是A对象可以包含B对象,但是B对象不是A对象的一部分.如大雁是群居动物,每只大雁都属于一个雁群,一个雁群可以 ...

  2. linux内核调优详解

    cat > /etc/sysctl.conf << EOF net.ipv4.ip_forward = net.ipv4.conf.all.rp_filter = net.ipv4. ...

  3. Webpack使用教程五(Babel)

    Babel是一个JavaScript编译和工具平台,使用Babel我们可以:使用新版本的JavaScript(ES6/ES2015,ES7/ES2016),尽管有些浏览器不能全部支持新特性:使用Jav ...

  4. EJDB 1.1.18 发布,嵌入式JSON数据库

    EJDB 1.1.18 增加对 MongoDB 操作符 $and 和 $or 的支持,支持 MongoDB 的 $ 推断操作符,修复了 $fields 提示的bug,提升了查询处理的性能. EJDB ...

  5. 跟我一起学WCF(9)——WCF回调操作的实现

    一.引言 在上一篇文章中介绍了WCF对Session的支持,在这篇文章中将详细介绍WCF支持的操作.在WCF中,除了支持经典的请求/应答模式外,还提供了对单向操作.双向回调操作模式的支持,此外还有流操 ...

  6. 想抛就抛:Application_Error中统一处理ajax请求执行中抛出的异常

    女朋友不是想抛就抛,但异常却可以,不信请往下看. 今天在MVC Controller中写代码时,纠结了一下: public async Task<ActionResult> Save(in ...

  7. Lingo 做线性规划 - DEA

    Reference: <An Introduction to Management Science Quantitative Approaches to Decision Making, Rev ...

  8. nested exception is org.xml.sax.SAXParseException: cvc-elt.1: Cannot find the declaration of element 'beans'.

    1缺少jar包 2spring配置文件里http://www.springframework.org/schema/beans/spring-beans-3.2.xsd的版本与实际jar包不一致

  9. 老生常谈JavaScript闭包

    闭包就是指一个有权访问另外一个函数作用域中的变量的函数.--<JavaScript高级程序第三版> 本人对于闭包初次的认识就来自<高三>,首先仅仅通过“有权”’两个字我们便可以 ...

  10. MySQL联合查询语法内联、左联、右联、全联

    MySQL联合查询效率较高,以下例子来说明联合查询(内联.左联.右联.全联)的好处: T1表结构(用户id,用户名,密码)   userid   username  password 1   jack ...