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. 浅谈java中的祖先类Object

    首先一道题: public class User{ private String name; private int age; public String getName() { return nam ...

  2. outlook2010设置失败后重新设置

    1.WIN+R ,然后在弹出框中输入outlook /importprf .\.prf 2.重新设置.

  3. token简单的使用

    这里对token的简单的使用进行测试和描述 其原理就不在这里描述了! 具体测试流程:用户在前端请求登录——>在后台验证通过后根据用户ID生成token——>请求返回时将token带给前端并 ...

  4. 学习Linux下的文件目录管理

                    文件目录管理 一.认识Linux文件系统的架构 在Linux中是没有盘符这个概念的,即Linux中没有C盘和D盘的分盘.那么我们直接通过对目录的操作实现对磁盘的读写,因 ...

  5. js中Array数组的属性和方法

    这是我自己整理出来的一些关于Array数组的属性和方法,即查即用. 1.Array.length属性:数组的项数组,始终返回0或者更大的值. 2.instanceof操作符:value instanc ...

  6. 2015219付颖卓《网络对抗》EXP8 Web基础

    实验后回答问题 1.什么是表单 来自百度百科的官方定义:表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方 ...

  7. Improved Semantic Representations From Tree-Structured Long Short-Term Memory Networks-paper

    Improved Semantic Representations From Tree-Structured Long Short-Term Memory Networks 作者信息:Kai Shen ...

  8. 实验四 CC2530平台上UART组件的TinyOS编程

    实验四 CC2530平台上UART组件的TinyOS编程 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步掌握CC2530的UART.及其TinyOS编程方法 学生通过本实验 ...

  9. C#编写CLR函数

    本案例在VS2017环境中开发: 1.新建项目,“数据库项目”,添加 UserDefinedFunctions.cs类文件,代码如下: using System; using System.Data; ...

  10. OSI七层网络模型浅析

    OSI七层网络模型(从下往上): 物理层(Physical):设备之间的数据通信提供传输媒体及互连设备,为数据传输提供可靠的 环境.可以理解为网络传输的物理媒体部分,比如网卡,网线,集线器,中继器,调 ...