function backTop(back) {
back.hide();
$(window).scroll(function () {
$(window).scrollTop() > 0 ? back.fadeIn(500) : back.fadeOut(500);
});
back.click(function () {
$('body,html').animate({scrollTop: 0}, 500);
return false;
});
} 或者class名操作显示隐藏淡入淡出
function backTop(obj,options) {
var options = options||{};
var offset = options.offset||300;
var duration = options.duration||500;
var $back = obj;
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back.show() : $back.hide();
});
//smooth scroll to top
$back.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, duration
);
return false;
});
}
 

back-to-top回到顶部的更多相关文章

  1. back to top 回到顶部按钮 css+js

    效果 html <p id="back-to-top"><a href="#top"><span></span> ...

  2. ASP.NET - 锚点跳转,用于回到顶部

    <a name ="top"></a> <a href ="#top">回到顶部</a> 第一行代码写在顶部,第 ...

  3. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  4. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  5. iOS点击状态栏回到顶部底层实现原理

    在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...

  6. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  7. 浮动【电梯】或【回到顶部】小插件:iElevator.js

    iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...

  8. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  10. jquery 回到 顶部

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

随机推荐

  1. Mybatis 中获取添加的自增主键ID(针对mysql)

    分享一篇博客,主要就是针对在我们使用SSM的时候,在.xml中获取<insert></insert> 时的自增主键Id,由于好久没有,这个时候使用,有点生疏,就在这里写个笔记, ...

  2. Python--错误SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape

    Refer to:https://www.cnblogs.com/cyiner/archive/2011/09/18/2180729.html 用Python打开文件: fo=open("C ...

  3. 角度&弧度转换

    一.角度转换为弧度 问题: 当使用Math类的三角函数的时候,所有的单位都是用弧度表示的.你有一个或多个角是用角度数度量的,并且希望把它们转换为弧度数,从而可以用它们作为Math类的成员. 解决方法: ...

  4. ln 软链

    ln -s a b 中的 a 就是源文件,b是链接文件名,其作用是当进入b目录,实际上是链接进入了a目录 如上面的示例,当我们执行命令   cd /gamestat/的时候  实际上是进入了 /hom ...

  5. docker1

    Docker笔记 1, https://gitlab-demo.com Docker官网:https://docs.docker.com/install/overview/ 有两个版本: Docker ...

  6. Spring定义事物通知tx:advice

    <aop:config proxy-target-class="false">    <aop:advisor advice-ref="txAdvice ...

  7. 关于使用deepin在linux下安装mysql出现Can't connect to local MySQL server through socket '/tmp/mysql/mysql.sock' (2)的解决方法

    根据目录/etc/mysql打开文件debain.cnf 此时文本里的内容为 # Automatically generated for Debian scripts. DO NOT TOUCH![c ...

  8. 9th week blog

    1957年 约翰·巴科斯(John Backus)创建了是全世界第一套高阶语言:FORTRAN. 1959年 葛丽丝·霍普(Grace Hopper)创造了现代第一个编译器A-0 系统,以及商用电脑编 ...

  9. uWSGI+Django+nginx(下)

    在上篇文章 说的uWSGI和Django都已没问题的情况下 找到 nginx的配置文件 我的是:/etc/nginx/nginx.conf 修改这个文件 在http{}里加入 下面的 server { ...

  10. 小程序开发:canvas在画布上滑动,页面跟着滑动问题

    微信小程序官方文档有说明,disable-scroll="true" 可以阻止页面下拉和滚动.这里有个坑,disable-scroll在真机上如果要生效,那么要给canvas绑定一 ...