HTML:

<footer>
<a href="#" class="top">&uarr;</a>
</footer>

CSS:

.top:hover{
opacity:1;
transition:1s;
}

JS:

 $(document).ready(function() {
var offset=250, // At what pixels show Back to Top Button
scrollDuration=300; // Duration of scrolling to top
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.top').fadeIn(500); // Time(in Milliseconds) of appearing of the Button when scrolling down.
} else {
   $('.top').fadeOut(500); // Time(in Milliseconds) of disappearing of Button when scrolling up.
}
}); // Smooth animation when scrolling
$('.top').click(function(event) {
  event.preventDefault();
$('html, body').animate({
scrollTop: 0}, scrollDuration);
})
});

Link

jquery,返回到顶部按钮的更多相关文章

  1. jquery返回滚动条顶部

    var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ ...

  2. jquery 返回浏览器顶部

    经常在网页中看到有这样的现象,点击一个按钮,然后页面会跳到页面的中指定的位置,那这种效果是怎么实现的呢? 很多网页都有这种效果:返回顶部或者跳到不同的楼层(以下是天猫的效果) 实现原理: 1.我们来看 ...

  3. jquery返回页面顶部

    1.此博文图片样式引用腾讯网站,效果如下: 2.样式设置: #toTop { /*选中的背景图片的大小*/ width: 54px; height: 54px; display: none;/*刚开始 ...

  4. jQuery实现“回到顶部”按钮功能

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

  5. jquery返回顶部,支持手机

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

  6. jQuery返回顶部(精简版)

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  7. 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

    1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...

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

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

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

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

随机推荐

  1. Android Mina框架的学习笔记

    Apache MINA(Multipurpose Infrastructure for Network Applications) 是 Apache 组织一个较新的项目,它为开发高性能和高可用性的网络 ...

  2. PHP受保护的类和私有类什么区别

    受保护的继承后可以访问,私有的只能在该类中访问,不会被继承访问class Man{ protected $name='lee';//受保护 private $age=123;//私有 function ...

  3. Android Service学习之AIDL, Parcelable和远程服务

    AIDL的作用     由于每个应用程序都运行在自己的进程空间,并且可以从应用程序UI运行另一个服务进程,而且经常会在不同的进程间传递对象.在Android平台,一个进程通常不能访问另一个进程的内存空 ...

  4. HashMap 扩容 加载因子

    HashMap: public HashMap(int initialCapacity, float loadFactor) { //初始容量不能<0 if (initialCapacity & ...

  5. 【转载】:【C++跨平台系列】解决STL的max()与numeric_limits::max()和VC6 min/max 宏冲突问题

    http://www.cnblogs.com/cvbnm/articles/1947743.html 多年以前,Microsoft 幹了一件比 #define N 3 還要蠢的蠢事,那就是在 < ...

  6. oracle启动关闭命令

    关闭:1.shutdown normal 不允许新的连接.等待会话结束.等待事务结束.做一个检查点并关闭数据文件.启动时不需要实例恢复. 2.shutdown transactional不允许新的连接 ...

  7. 使用Html来避免写复杂的app代码,跨平台

    http://www.jianshu.com/p/c375ac056149 http://www.php.net.cn/app/

  8. Java基础之创建窗口——使用GridBagLayout管理器(TryGridBagLayout)

    控制台程序. java.awt.GridBagLayout管理器比前面介绍的其他布局管理器灵活得多,因此使用起来也比较复杂.基本机制就是在随意的矩形网格中布局组件,但网格的行和列不一定拥有相同的高度和 ...

  9. Swift语言实战晋级-第9章 游戏实战-跑酷熊猫-1

    学习目标 一.进一步学习Swift的游戏制作 二.掌握SKNode,SKSpriteNode的运用 三.了解SpriteKit的物理系统 四.掌握动作(SKAction)的运用 在这一章,我们要通过制 ...

  10. Leetcode: Remove Elements

    Given an array and a value, remove all instances of that value in place and return the new length. T ...