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. Smokeping配置完成之后出现Software error解决办法

    下面是在浏览器中输入http://localhost/smokeping点击回车之后出现的错误: Software error: ERROR: creating /usr/local/smokepin ...

  2. 2019 Power BI最Top50面试题,助你面试脱颖而出系列<中>

    敲黑板啦!!! 来来来 大家双眼看黑板 开始划重点啦 这篇大部分是"考试"必考题 你们一定要好好的牢记在心 一分都不要放过 刷题中... Power BI面试题目-DAX 9)什么 ...

  3. RN集成echarts4图表组件react-native-secharts(转载)

    一个webview封装的图表组件.基于百度echarts4,相比native-echarts有echarts自带对象支持,例如渐变色等,用法与官网相同用法. echarts version 4.2.0 ...

  4. C#中的session用法

    Session具有以下特点: (1)Session中的数据保存在服务器端: (2)Session中可以保存任意类型的数据: (2)Session默认的生命周期是20分钟,可以手动设置更长或更短的时间. ...

  5. CentOS无法使用ifconfig和root密码修改

    初学Linux,总是有许多问题,这次就遇到了这个问题: 想使用ifconfig命令查看一下虚拟机的ip地址,结果发现ifconfig命令无法使用,总是显示找不到ifconfig这个命令. 上网查询帮助 ...

  6. oo第四次博客

    一.测试与正确性论证比较 正确性论证是论证程序达到预期目的的一般性陈述,而该论证与程序输入数据的特定值无关,能够代表穷举性测试. 程序测试是指测试者特意跳出一批输入数据,通过运行程序,检查每个输入数据 ...

  7. 用matlab画漂亮的sin曲线

    Technorati 标记: matlab,plot 相信大部分用过matlab的人都画过sin曲线,直接plot就可以了,不过呢,plot出来的曲线自然不那么好看,本着绳命在于折腾的原则,小弟学习了 ...

  8. Api文件

    对于我们不认识的类(只限于java自带的类),我们可以百度去查一下,但是这样是嚼别人吃剩下的骨头,我们可以去查java的api文件,虽然都是英语,但是还是硬着头皮看吧,加油! 链接:https://p ...

  9. rem 自适应适配方法

    rem是指相对于根元素(html)的字体大小的单位,它是一个相对单位,它是css3新增加的一个单位属性,我们现在有很多人用的都是px,但px是一个绝对单位,遇到分辨率不同的设备,做出的页面可能会乱,这 ...

  10. Spring Boot 定时任务使用

    详情参考文章https://blog.csdn.net/qq_31001665/article/details/76408929