JS实现返回顶部的方法
时间:2018-08-20
本文章向大家介绍JS实现返回顶部的方法,需要的朋友可以参考一下。
<!--JSP写入 回到顶部--!>
<div style="overflow: hidden;position: fixed;right: 10px;bottom: 20px;z-index: 10;">
<div style="overflow: hidden;">
<div style="padding-top:20px;padding-right:50px;padding-bottom:50px;">
<a href="#" style="float: right;display:none" class="btns maoDian" id="goToTop" >回到顶部</a>
</div>
</div>
</div>
<!--js写入--!>
$(function(){
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#goToTop").fadeIn();
}
else
{
$("#goToTop").fadeOut();
}
});
//当点击跳转链接后,回到页面顶部位置
$('#goToTop a').click(function(){
$('html,body').animate({scrollTop:0},'slow');
});
});
})
- Linq基础知识小记二
- IntelliJ IDEA 中的版本控制介绍(中)
- React Native动画详解
- 小程序实现原理解析
- EF 通过DataAnnotations配置属性和类型
- IntelliJ IDEA 中的版本控制介绍(上)
- EF基础知识小记七(拆分实体到多个表以及拆分表到多个实体)
- Android 进程回收之LowMemoryKiller原理篇
- 邮件发送功能开发
- Vuejs和其他前端框架的对比
- 详述 IntelliJ IDEA 中恢复代码的方法
- C# 通过IEnumberable接口和IEnumerator接口实现自定义集合类型foreach功能
- 微信小程序之picker组件
- 详述 IntelliJ IDEA 中恢复代码的方法「进阶篇」
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 竞赛比完,代码、模型怎么处理?Kaggle大神:别删,这都是宝藏
- 显示DataGrid序号的一个适用的方法
- SAP Spartacus cms-components.service.ts里的config.cmsComponents
- ng-template和ng-container的嵌套使用
- SAP Spartacus pageSlot一览
- Angular @Hostbinding工作原理
- Python干货 | 遥感影像拼接
- SAP Spartacus 自定义指令的实现以及通过@HostBinding实现属性绑定
- Python气象绘图教程—(十九)剖面图
- Angular DefaultDomRenderer2.setProperty
- 在pandas中利用hdf5高效存储数据
- AMS机器学习课程:Keras深度学习 - 卷积神经网络
- python教程 | 最标准的地图调用方式(国家测绘局提供数据)
- 「万物生长」一个APK从诞生到活跃在Android手机上
- webpack实战——生产环境配置【下】