jq返回顶部功能--面向对象思路

最新推荐文章于 2021-05-30 10:23:49 发布

Tsundere黄

最新推荐文章于 2021-05-30 10:23:49 发布

阅读量732

点赞数

文章标签：面向对象 JavaScript

本文链接：https://blog.csdn.net/weixin_35987513/article/details/52816847

版权

在慕课网看了个用requireJS和面向对象的思想，封装一个返回顶部的功能按钮。主要有两功能，首先是滚动到一定位置才显示按钮，二是提供回到顶部的方法：缓慢滚动到顶部功能、“嗖”马上到达顶部。
其实按照平时写的话，十几行代码就搞定为什么还要用下面这么麻烦来实现呢？个人觉得这个例子简单，适合像我这种第一次接触用面向对象思想。
首先html就简单的一个返回顶部的按钮

<a href="javascript:;" id="top"></a>
<script type="text/javascript" src="requireJS.js" data-main="main"></script>

*这里插一句，以前我都是写href=”javascript:void(0);”，后来翻看大神的博客的时候，才知道原来void(0)是一点用处都没有的，有些人连;都去掉。
*js的话先引用requireJS，然后通过data-main来定义入口文件。因为这里都是默认以.js为后缀的，所以后缀都可以省掉。

main.js

requirejs(['jquery'],function($) {
   
    $(window).on("scroll",function() {
              //监听滚动条，当页面滑动超过一屏，显示按钮
        checkPosition($(window).height());
    });
    function checkPosition(pos) {
   
        if($(window).scrollTop() > pos) {
            $("#top").fadeIn();
        }else