back-to-top回到顶部
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回到顶部的更多相关文章
- back to top 回到顶部按钮 css+js
效果 html <p id="back-to-top"><a href="#top"><span></span> ...
- ASP.NET - 锚点跳转,用于回到顶部
<a name ="top"></a> <a href ="#top">回到顶部</a> 第一行代码写在顶部,第 ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- iOS点击状态栏回到顶部底层实现原理
在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...
- 【JavaScript Demo】回到顶部功能实现
随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...
- 浮动【电梯】或【回到顶部】小插件:iElevator.js
iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- jquery 回到 顶部
1. 页面内容较多, 从底部超链接 点击回到页面顶部 // 回到顶部 var $top = $('<a class="doc-gotop" href="javasc ...
随机推荐
- Python帮助
我们可以很容易的通过Python解释器获取帮助.如果想知道一个对象(object)更多的信息,那么可以调用help(object)!另外还有一些有用的方法,dir(object)会显示该对象的大部分相 ...
- 用chrome和anywhere,配合安卓机搭建最简单的移动端页面测试。
很多时候,我们前端在写移动端页面的时候,虽然目前chrome有调试模式,可以模拟手机的部分效果,但仍有部分效果需要直接在手机上进行页面的调试,今天就在这里推荐一个适合windows+安卓的无需连接局域 ...
- 【oracle】dmp导数据库
假定数据库A为源数据库,数据库B为目标数据库 step1在数据库A中,导出生成.dmp文件,操作流程如下(以下操作均在系统用户ora11g下执行) 1.该操作只需要在第一次使用时执行,A_dump_d ...
- JavaScript创建对象的方式
一.工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程. 考虑到在 ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的 ...
- 蓝桥每周一题之1. 3n+1 问题
[问题描述] 考虑如下的序列生成算法:从整数 n 开始,如果 n 是偶数,把它除以 2:如果 n 是奇数,把它乘 3 加1.用新得到的值重复上述步骤,直到 n = 1 时停止.例如,n = 22 时该 ...
- 请求转发和URL重定向的原理和区别
一.请求转发和重定向是在java后台servlet中,由一个servlet跳转到另一个servlet/jsp要使用的技术 使用方法 请求转发 req.getResquestDispatcher(se ...
- CMDB-(paramiko模块 -- 实现ssh连接)
import paramiko # 实现ssh功能的模块 ssh = paramiko.SSHClient() # 实例化对象 ssh.set_missing_host_key_policy(para ...
- Linux下RabbitMQ的安装 开机自启动
1.官网下载地址 下载 RabbitMQ 和 erlang.我下载的是rabbitmq-server-3.6.10-1.el7.noarch.rpm和erlang-19.0.4-1.el7.cento ...
- routeros DDNS 动态域名更新IP
:local ednsuser "账号":local ednspass "密码":local ednshost "域名":local edn ...
- Java_01初识
1.配置环境变量 设置JAVA_HOME:新建系统变量,变量名为JAVA_HOME,变量值设置为java jdk所在的目录 设置path: 在所有数据的最前方添加%JAVA_HOME%\bin; 2. ...