使用Tailwind css和JavaScript实现一个简单的返回顶部功能

博客的页面需要一个返回顶部的功能，之前都是使用的jQuery的插件来实现的，但是一个及其简单的功能就需要引入jQuery和一个相关插件总觉得有些多余，所以只好自己动手实现一个返回顶部的功能。

需求分析

1. 有一个按钮，固定在页面的右下角的。
2. 当HTML页面视口不在顶部的时候，点击返回顶部按钮就会实现返回页面顶部的功能，且返回时有动画效果，不是直接立即返回。
3. 当滚动条的位置高度小于500的时候，返回按钮隐藏，当大于500的时候显示。

很简单就这二个功能。

具体实现

首先实现按钮的定位，这里可以使用纯CSS来实现也可以使用tailwind，由于我引用了tailwind，这里我使用tailwind css来实现：

<div class="rightside fixed bottom-20 right-2 w-10">
    <button>Top</button>
</div>

添加一个fixed的页面绝对定位，然后通过bottom-20 right-2 等属性来定义他的具体位置。

接下来就是实现按钮点击返回顶部的功能：

/**
* 按钮点击后，滚动将以平滑的动画方式进行。
*/
function scrollToTop() {
window.scrollTo({
    top: 0,
    behavior: 'smooth'
});
}

只要为<button>绑定鼠标点击事件scrollToTop()，就可以实现点击返回页面顶部。

最后来实现按钮的隐藏和显示，JavaScript代码如下：

// 获取返回顶部按钮的元素
const topButton = document.getElementById("topButton");

// 监听页面滚动事件
window.onscroll = function () {
// 获取页面滚动距离
const scrollY = window.scrollY;


// 如果页面没有滚动或者滚动条还在页面的顶端，隐藏按钮
if (scrollY < 500) {
    topButton.classList.remove("block");
    topButton.classList.add("hidden");
} else {
    topButton.classList.remove("hidden");
    topButton.classList.add("block");
}
};

这里使用滚动条时间来监听滚动条的位置，const scrollY = window.scrollY;获得了滚动条的实时位置，然后判断位置，为按钮添加class,使之隐藏和显示，进而实现了本次需求的所有功能。