jQuery返回顶部（精简版）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery返回顶部</title>
<style>
*body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的，防抖动 */}
*body #toTop{ position: absolute; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-10)); /* 底部固定悬浮 */}
#toTop{ display: none; position: fixed; border: 1px solid red; right: 10px; bottom: 10px; padding: 10px 0; cursor: pointer;}
</style>
</head>
<body style="height:3000px;">
<div id="toTop"> scroll to top</div>

<script src="http://www.qixoo.qixoo.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function(){
var toTop = $(‘#toTop‘);

// 当窗口滚动条滚动时触发
$(window).scroll(function(){
var st = $(window).scrollTop(); //获取浏览器窗口向上滚动的距离

// 选项卡标签栏/控制台调试代码
// document.title = $(window).scrollTop();
// console.log($(window).scrollTop());

// 判断向上滚动距离是否大于500
if(st<500){
toTop.fadeOut(‘fast‘);
}else{
toTop.fadeIn(‘fast‘);
}
});
// 当点击按钮时触发
toTop.click(function(){
$(‘html ,body‘).animate({
scrollTop: 0
},300);
return false;
});
});
</script>
</body>
</html>

jQuery返回顶部（精简版）的更多相关文章

  1. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  2. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  3. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  4. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  5. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  6. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  7. jquery返回顶部

    // 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...

  8. Jquery 返回顶部

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

  9. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

随机推荐

  1. linux下安装php的imagick扩展模块（附php升级脚本）

    imagick是一个PHP的扩展,是一套软件系列,用ImageMagick提供的API来进行图片的创建与修改,不过这些操作已经包装到扩展imagick中去了,最终调用的是ImageMagick提供的A ...

  2. vue2.0 transition -- demo实践填坑

    前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...

  3. Bolts-Android

    对Android客户端编程来说,有个明确的规则是不能在ui线程里面做耗时的操作.这样就要求网络请求.文件读写等等操作都要异步操作.而异步操作完成后,往往需要再更新ui界面.最直接的想法是回调,只要保证 ...

  4. Difference Between TIF and TIFF

    TIF vs TIFF Many people are confused with similar file extensions that only differ by a single lette ...

  5. 敏捷软件开发 Agile software Development(转)

    原文链接: http://www.cnblogs.com/kkun/archive/2011/07/06/2099253.html 敏捷软件开发 Agile software Development ...

  6. LeetCode 笔记26 Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  7. 文本模板转换工具包和 ASP.NET MVC

    http://msdn.microsoft.com/zh-sg/magazine/ee291528.aspx

  8. 20145222黄亚奇《Java程序设计》实验一实验报告

    实验一 Java开发环境的熟悉(Linux+Eclipse) 实验内容及步骤 使用JDK编译.运行简单的Java程序 在NetBeans IDEA中输入如下代码: package ljp; publi ...

  9. MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)

    文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-httphelper-part1.html 上一节 ...

  10. 如何自学 Android 编程？

    最近知乎上有网友问我怎么自学Android,其实说实在的,我学的也一塌糊涂,当然在学习过程也积累了一些知识,对于以前没接触过Android的朋友,或者刚入门Android 的朋友,这篇文章作为入门,那 ...