jQuery回到顶部

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Back to Top</title>
<link rel="stylesheet" href="">
<style>
#content {
height: 2000px;
}
#back-to-top.show {
opacity: 1;
}
#back-to-top {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 9999;
width: 32px;
height: 32px;
text-align: center;
line-height: 30px;
background: #f5f5f5;
color: #444;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
opacity: 0;
transition: opacity .2s ease-out;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="content">Scroll &darr;</div>
<a href="#" id="back-to-top" title="Back to top">&uarr;</a> <script src="jquery-1.9.0.min.js"></script>
<script>
if ($('#back-to-top').length) {
var scrollTrigger = 100; // px // $(window).scrollTop()与 $(document).scrollTop()产生结果一样
// 一般使用document注册事件,window使用情况如 scroll, scrollTop, resize
$(window).on('scroll', function () {
if ($(window).scrollTop() > scrollTrigger) {
$('#back-to-top').addClass('show');
} else {
$('#back-to-top').removeClass('show');
}
}); $('#back-to-top').on('click', function (e) {
// html,body 都写是为了兼容浏览器
$('html,body').animate({
scrollTop: 0
}, 700); return false;
});
}
</script>
</body>
</html>

jQuery回到顶部的更多相关文章

  1. Jquery 回到顶部

    转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html 用jQuery实现渐隐渐显的返回顶部效果(附多图)   先来看几个图片 ...

  2. jQuery回到顶部插件jQuery GoUp

    插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...

  3. html css jquery 回到顶部按钮

    今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...

  4. Jquery回到顶部插件【query.scrollUp.js】使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  5. jquery 回到 顶部

    1. 页面内容较多, 从底部超链接 点击回到页面顶部 // 回到顶部 var $top = $('<a class="doc-gotop" href="javasc ...

  6. Jquery回到顶部功能

    问题描述: 在网页中,我们经常会由于网页内容过长,而需要在浏览网页时有一个快速回到网页顶部的功能,在浏览网页内容离顶部有一段距离时,出现快速回到网页顶部的工具,从而能使我们的网页更人性化. 问题的产生 ...

  7. jquery 回到顶部,简洁大方

    效果

  8. JQuery 回到顶部效果

    图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...

  9. Jquery回到顶部效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

随机推荐

  1. Android学习----Android Studio 技巧汇总

    关于快捷键 The File Structure Popup ctrl+f12此快捷键可以调出当前文件的大纲,并通过模糊匹配快速跳转至指定的方法.勾选上“show anonymous classes” ...

  2. 关于PHPstorm 使用技巧

    慢慢更新,一点点积累,都是自己在使用中遇到的问题 设置:(2016.4.15) 1:注释模板,phpstorm 有非常强大的注释模板,可以根据自己的需求随时更改,并设置快捷键,非常方便 新文件注释 P ...

  3. Bug: freetype/fterrors.h: No such file or directory

    Bug描述: 安装PIL过程中出现题目中的错误信息,具体如下:

  4. Pyhon + Django 1.7.2 tutorial + virtualenv简单使用

    最近工作中要用到python,先前没怎么接触过,把python本身的语法以及特性撸过一边之后,这两天按着django官方的文档倒腾了几天, 文档非常详细,本人英语水平也就那样,大体没什么压力,建议像我 ...

  5. spring 日志

    spring日志结构

  6. 一分钟让你明白CSS中的盒模型

    想必初学者对CSS盒模型总是很困惑吧.下面一分钟让你彻底明白盒模型: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &q ...

  7. Node.js stream 流学习

    由于node.js 创建http 是这样的 http.createServer(function(request,response){}).listen(2000); 里面的request 就是rea ...

  8. codemirror 插件

    做在线词典编辑的时候.里面有些自定义标签.类似html标签一样. 为了让编辑编辑.改成了  <动词></动词> 所以引用了 codemirror插件 此插件绝对牛逼 它主要功能 ...

  9. nutch fetcher.server.delay

    1 配置因素 <property>  <name>fetcher.server.delay</name>  <value>0.0</value&g ...

  10. linux shell 终端中文乱码(转)

    方法一:修改/etc/sysconfig/i18n 文件把里面的LANG="en_US"改成 GB2312就可以了要重启一下机器不用重启的方法,直接# LANG="GB2 ...