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

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

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

http://xxx.fishc.com/forum/201707/30/122327brkrpx1rrlvxp447.jpg

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





论坛上有一个小尴尬:

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

言归正传:
素材包:

文档结构:


基本知识:
$(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>
    <!--引入css样式-->
    <link rel="stylesheet" href="css/main.css">
    <!--引入jq文件-->
    <script src="js/jquery.min.js"></script>

</head>
<body>
<!--模拟长页面结构-->
<div style="width: 100%;height: 3333px;">
    <!--p标签,放在页面顶部,防止代码不起作用(浏览器版本),仍可通过锚点操作实现-->
<p id="pageTop"></p>

    <!--定义按钮-->
<div id="topButtonSize">
    <!--通过a标签绑定,以防万一,先注释掉-->
<!--<a href="#pageTop" class="goPageTop"></a>-->
    <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实现加载更多的效果,该效果其实是分页的另一种效果。

        欢迎自己脑洞实现~

最终源码:



如果喜欢,别忘了评分{:10_281:} :

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油,如果喜欢本系列Js帖子,请订阅 专辑☞(传送门)(不喜欢更要订阅{:10_297:} )

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

@小甲鱼{:10_256:}

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

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

{:10_305:} 特么的很帅啊!
页: [1]
查看完整版本: 0 2 0 5 ★ J酷炫回到顶部&底部 |【补bug】