0 2 0 5 ★ J酷炫回到顶部&底部 |【补bug】

不二如是 · 发表于 2017-12-24 11:22:07

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2017-12-24 11:22 编辑

登录/注册后可看大图

在之前的系列中，我们学习了最流行的JavaScript框架jQuery。

论坛上有一个小尴尬：

侧边栏不明显的回顶提示，如果像Md语言中有置顶的按钮放在文本中，那将大大提升阅读体验～
（推荐：第零篇 - 七招教你玩通Markdown！ | 【撩妹、涨薪、装X神器】）

言归正传：

素材包：素材.zip (23.38 KB, 下载次数: 6, 售价: 1 鱼币)

2017-12-24 10:15 上传
点击文件名下载附件

文档结构：

基本知识：

$(window).height(); //用于获取浏览器显示区域（视口）的高度

$(window).width(); //用于获取浏览器显示区域的宽度

$(document.body).height(); //获取页面文档的高度

$(document.body).width(); //获取页面文档的宽度

$(document).scrollTop(); //获取垂直滚动条到顶部的垂直距离

$(document).scrollLeft(); //获取水平滚动条到左边的水平距离

$('元素id或class').offset(); //方法返回或设置匹配元素相对于文档的偏移（位置）。该方法返回的对象包含两个整型属性：top 和 left
复制代码

回到顶部

此特效是网页开发中出现频率非常高的一个功能，虽然有很多能实现该功能的插件。

只需要简单的引入效果就实现了，但实现原理一知半解，这次我来一点一点拆解开来。

要实现的效果：

1.通过jQuery判断滚动条向下滚动的长度大于多少时显示【回到顶部】元素。

2.点击实现“回到顶部”效果。

HTML基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C-置顶&置底</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div style="width: 100%;height: 3333px;">
<p id="pageTop"></p>
<div id="topButtonSize">
<a class="goPageTop"></a>
</div>
</div>
</body>
</html>

复制代码

添加置顶区域-css样式：

#topButtonSize{
position: fixed;
bottom: 66px;
right: 11px;
width: 50px;
height: 66px;
z-index: 9999;
background-color: #faa;
}

复制代码

现在可以添加按钮样式了，别忘了把背景色去掉。

添加按钮样式：

.goPageTop{
background: url(../img/up.png) no-repeat 0 0;
width: auto;
height: 50px;
background-size:32px auto ;
display: block;
}

复制代码

调用图片，具体样式不解释了，毕竟是jq系列。

现在添加动作，完成单击图片，置顶：

<script>
// 回到顶部
$(function () {
$(window).scroll(function () {
if($(window).scrollTop() > 99)
{
// >99，渐变显示按钮区域
$("#topButtonSize").fadeIn(100);
}
else{
$("#topButtonSize").fadeOut(100);
}
})
})
</script>

复制代码

B格有了，现在添加最重要的置顶：

$(function () {
// 单击按钮，通过动画设置页面高度在1s内变为0
$(".goPageTop").click(function () {
$('body,html').animate({
scrollTop:0
},1000);
return false;
})
})

复制代码

判断是否到达底部或某元素

教程一开始的几个关于高度的jQuery知识点，总结出户：

浏览器显示区域的高度+垂直滚动条距离顶部距离<=网页的高度

复制代码

理解了这个公式，效果实现起来就简单很多了。

添加js：

$(window).scroll(function () {
//网页文档高度
var bodyHeight = $(document.body).height();
// 滚动条距离网页顶部的高度
var scrollHeight = $(document).scrollTop();
// 页面可视化区域高度
var divHeight = $(window).height();
// 向上取整来判断，没啥影响，分享下用法而已
if(Math.ceil(divHeight + scrollHeight) >= bodyHeight)
{
alert("大佬触底了！");
}
})

复制代码

利用上面的基础代码还可以扩展出一个效果更好的特效：

滚动滚动条，到达底部的时候通过Ajax实现加载更多的效果，该效果其实是分页的另一种效果。

欢迎自己脑洞实现～

最终源码：

jQ回到顶部&底部.zip (42.69 KB, 下载次数: 7, 售价: 10 鱼币)

如果喜欢，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列Js帖子，请订阅专辑☞（传送门）（不喜欢更要订阅

）

不二如是 · 发表于 2017-12-24 11:24:38

@小甲鱼

小甲鱼 · 发表于 2017-12-24 13:04:45

不二如是发表于 2017-12-24 11:24
@小甲鱼

特么的很帅啊！

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 2 0 5 ★ J酷炫回到顶部&底部 |【补bug】

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: