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. 分享一个好用的tmux配置文件

    tmux众所周知,不过多介绍,友好的tmux配置,让人用起来很舒服,分享一个tmux配置文件 # ------ general ------------------------------------ ...

  2. 常见Soc平台图形内存管理学习笔记

    硬件编解码.硬件图像scale等过程,是在专有的硬件单元里进行,其使用的内存也是专有的内存,这种内存多是SoC中图形内存.如此方便与硬件加速图形渲染.图像显示.硬件图像加速处理等功能相交互. 上述过程 ...

  3. Window 下载Android系统源代码

    第一步:使用命令下载manifest文件夹 git clone https://aosp.tuna.tsinghua.edu.cn/ 第二步:进入文件夹,打开default.xml文件并找到自己要下载 ...

  4. POJ - 1830:开关问题 (开关问题-高斯消元-自由元)

    pro:有N个相同的开关,每个开关都与某些开关有着联系,每当你打开或者关闭某个开关的时候,其他的与此开关相关联的开关也会相应地发生变化,即这些相联系的开关的状态如果原来为开就变为关,如果为关就变为开. ...

  5. django如何查看mysql已有数据库中已有表格

    首先正常创建django项目,配虚拟环境,改配置文件,正常创建models,创建迁移和启动迁移等 接着通过找到Terminal窗户,双击,打开窗口 输入命令 python manage.py in i ...

  6. Day1-浅谈接口测试

    1.接口测试的定义:从数据库里面取数据,插入数据,把前段和后端联系起来: 2.接口测试的必要性: 1)前端未开发好,但是接口已开发 2)页面上测不了的,可以通过接口来测试 3.接口测试需要注意: 1) ...

  7. 科学计算和可视化(numpy及matplotlib学习笔记)

    网上学习资料:https://2d.hep.com.cn/1865445/9 numpy库内容: 函数 描述 np.array([x,y,z],dtype=int) 从Python列表和元组创造数组 ...

  8. 学习笔记CB010:递归神经网络、LSTM、自动抓取字幕

    递归神经网络可存储记忆神经网络,LSTM是其中一种,在NLP领域应用效果不错. 递归神经网络(RNN),时间递归神经网络(recurrent neural network),结构递归神经网络(recu ...

  9. python excle写数据

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/4/24 10:30 # @File : Excle写.py # @Softw ...

  10. FlexRay通信机制

    通信周期是 FlexRay 的基本通信单元[6~7,19].每个通信周期包括四个时间层,如图 2-9 所示.通信周期由静态段(Static Segment).动态段(Dynamic Segment). ...