js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部
本文就记录下js实现代码:
1.在html页面body添加dom元素
<img src="toTop.png" alt="" class="gotop" > <div class="gotopdiv" style="display: none;"><span>返回顶部</span></div>
2.页面向下滚动时,出现该图标
//滚动时出现返回顶部
$(window).scroll(function () {
var top_scroll = $(document).scrollTop();
if (top_scroll > 0) {
$('img.gotop').css({ 'display': 'block', 'cursor': 'pointer' });
$('.gotopdiv').css({ 'display': 'none' }); } else {
$('img.gotop,.gotopdiv').css({ 'display': 'none' })
} })
3.点击该图标,回到页面顶端
//点击返回顶部
$(document).on('click','.gotopdiv,.gotop',function () {
$(document).scrollTop(0);
$('.gotop').hide()
$('.gotopdiv').hide();
})
4.加入该图标鼠标放置离开css效果
$(document).on('mouseenter','.gotop',function () {
var top_scroll = $(document).scrollTop();
if (top_scroll > 0) {
$(this).next().show();
$(this).hide();
}
})
$(document).on('mouseleave','.gotopdiv',function () {
var top_scroll = $(document).scrollTop();
if (top_scroll > 0) {
$(this).prev().show()
$(this).hide();
}
})
5 加入css。页面最终全部代码如下:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="jquery-1.10.2.min.js"></script>
<style>
.gotop,.gotopdiv{
position: fixed;
bottom: 20px;
width: 52px;
display: none;
height: 52px;
right: 100px;
z-index: 999;
} .gotopdiv{
background: #60BF8B;
font-weight: bold;
text-align: center;
cursor: pointer;
width: 52px;
height: 55px;
color: #fff;
font-size: 15px;
}
.gotopdiv span{display: inline-block;
padding: 10px;
position: relative;
}
</style> </head>
<body> <div style="position:absolute;width:600px;height:3000px;"></div>
<img src="toTop.png" alt="" class="gotop" > <div class="gotopdiv" style="display: none;"><span>返回顶部</span></div> </body> <script>
$(document).on('mouseenter','.gotop',function () {
var top_scroll = $(document).scrollTop();
if (top_scroll > 0) {
$(this).next().show();
$(this).hide();
}
})
$(document).on('mouseleave','.gotopdiv',function () {
var top_scroll = $(document).scrollTop();
if (top_scroll > 0) {
$(this).prev().show()
$(this).hide();
}
}) //点击返回顶部
$(document).on('click','.gotopdiv,.gotop',function () {
$(document).scrollTop(0);
$('.gotop').hide()
$('.gotopdiv').hide();
})
//滚动时出现返回顶部
$(window).scroll(function () {
var top_scroll = $(document).scrollTop();
if (top_scroll > 0) {
$('img.gotop').css({ 'display': 'block', 'cursor': 'pointer' });
$('.gotopdiv').css({ 'display': 'none' }); } else {
$('img.gotop,.gotopdiv').css({ 'display': 'none' })
} })
</script> </html>
Demo效果和源码下载可以点击demo
js网页返回页面顶部的小方法的更多相关文章
- HTML5商城开发五 实现返回页面顶部
本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...
- 基于JS实现回到页面顶部的五种写法(从实现到增强)
这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下 写法 [1]锚点 使用锚点链接是一种 ...
- react-router(v4) 路由跳转后返回页面顶部问题
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...
- 代码: 返回页面顶部 jquery
jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...
- atitit. js 跨界面 页面 web cs 传值方法总结
atitit. js 跨界面 页面 web cs 传值方法总结 #--需求 js #---两个方法: 直接传跟跟间接传递... 1.直接传跟new form(param) web使用url方 ...
- 解决点击a标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery实现返回页面顶部功能。
<p id="back-to-top"> <span></span> </p> <script type="text ...
- (转)解决点击a标签返回页面顶部的问题
本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...
- 原生态js,返回至顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Hadoop 2、配置HDFS HA (高可用)
前提条件 先搭建 http://www.cnblogs.com/raphael5200/p/5152004.html 的环境,然后在其基础上进行修改 一.安装Zookeeper 由于环境有限,所以在仅 ...
- NetAnalyzer笔记 之 八 NetAnalyzer2016使用方法(2)
[创建时间:2016-05-06 22:07:00] NetAnalyzer下载地址 在写本篇的时候,NetAnalyzer 3.1版本已经发布,所以本篇就以最新版本的为例继续使用,并且顺带说明一下, ...
- nyist 82迷宫寻宝(一)(BFS)
题目连接:http://acm.nyist.net/JudgeOnline/problem.php?pid=82 此题在基础BFS上加入了门和钥匙,要找齐所有钥匙才能开门,所以要对门特殊处理. 1.先 ...
- ssh命令
使用ssh命令登陆远程系统 ssh [ip/address] -l [登陆用户名] 如: ssh www.xyz.cn -l root
- C# 大小写转换
全部大写: string upper = str.ToUpper() 全部小写: string lower = str.ToLower(); str是需要转换的字符.
- 获取Excel表中各个Sheet的方法
获取Excel表中各个Sheet的方法 private void simpleButton2_Click(object sender, EventArgs e) { OfdBOM.Filter = & ...
- Ajax:Cross-Origin Resource Sharing(转)
实例:http://blog.csdn.net/hongweigg/article/details/39054403 通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略.默认情况下,XHR对 ...
- lambda语法
(参数列表) => 表达式或者语句块 s => (s.IndexOf("a") > -1 其中:参数个数:可以有多个参数,一个参数,或者无参数.表达式或者语句块: ...
- Java的Object对象
Object对象是除了基础对象之外,所有的对象都需要继承的父对象,包括数组也继承了Object Object里面的关键函数罗列如下: clone();调用该函数需要实现 Cloneable,否则会抛出 ...
- hdu4296 贪心
E - 贪心 Crawling in process... Crawling failed Time Limit:2000MS Memory Limit:32768KB 64bit I ...