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 ...
随机推荐
- vmware虚拟机安装了linux(redhat)系统忘记登录密码怎么办
今天,打开了以前装过的vmware虚拟机,正常启动之后,一直想不起登录密码,怎么都是登录不进去.然后在网上查找资料,最后重置了密码.下面,分享下具体操作过程. 1.重新启动虚拟机,在出现启动进度条时按 ...
- Execute to Parse %: 29.76,数据库硬解析过高,监控告警提示数据库硬解析比例过低
客户反馈,Oracle重启库操作后,监控告警出现pin比例低于25% 根据Oracle体系结构的理解,重启库后,硬解析及buffer命中率肯定有一段时间低. 生成不同时段的AWR报告:不要生成rac ...
- reducer 按key聚合
#coding=utf8 import sys import itertools import json reload(sys) sys.setdefaultencoding("utf8&q ...
- padding填充属性
内边距属性: 设置元素的内容与边框之间的距离. 分4个方向(上右下左): padding-top padding-right padding-bottom padding-left 说明:值不能为负值 ...
- jmeter 上传附件脚本报Non HTTP response code: java.io.FileNotFoundException
如果上传附件报如下错误,就需要把附件放到和脚本同一路径下就解决了
- 转:Eclipse Memory Analyzer入门学习笔记
原文地址:https://blog.csdn.net/cc907566076/article/details/79108782 Eclipse Memory Analyzer是一个快速而功能丰富的Ja ...
- SQL Sever 2012版本数据库的完全安装流程
首先安装SQL Sever 2012数据库,我们要下载好安装包.将安装包存储在磁盘中. 安装前将杀毒软件和相关安全的软件等退出,以免造成安装中的错误. 安装环境:Win7 64位操作系统 注:SQL ...
- 闲记 单元格与单元格之间的边 ///字体属性都是font开头,除了颜色属性 ///文本属性都是text开的,除了设置行高。
这两天一直在做网页没有什么太大的问题,期间也考了一场试,对答案的时候老师讲了一些小知识,因此来记录一下. 单元格与单元格之间的边距(cellspaling) list-type-image可以使用图像 ...
- 学习笔记(三)--Lucene分词器详解
Lucene-分词器API org.apache.lucene.analysi.Analyzer 分析器,分词器组件的核心API,它的职责:构建真正对文本进行分词处理的TokenStream(分词处理 ...
- admin-7
Admin07 root tmooc 还原三台虚拟机[root@room9pc13 ~]# rht-vmctl reset classroom[root@room9pc13 ~]# rht-vmctl ...