原来用的罗技K480是2019年买的，用起来已经感觉很“费劲”了，打字的话需要使劲按键盘的键子，手指头都觉得很累！最近实在是受不了了，某东直接入手了一个PHILIPS机械键盘。

## 上手体验

![博客名称](https://suiyan.cc/assets/images/2023/kb.jpg)

我买的是红轴的机械盘哈，老婆说了不能买按键声音比较大，不然就给我扔了。。。要不然我非得买青轴的机械键盘，论敲击声音的排行：从小到大分别是红轴、黑轴、茶轴、青轴，红轴是几种轴体中声音最小的机械键盘。但是声音还是不小的，但是可以接受。红轴键盘的手感比较轻盈，虽然没用过青轴的键盘，但是从网上的文章中可以了解到青轴的打击感更强，敲起来应该是啪啪啪的更有段落和打击感。

飞利浦这款键盘样式还是很多的，比较中规中矩，买104建是为方便使用各种软件的快捷键，键子的手感很细腻，键子的布局和距离很符合人体工学，自带了18种跑马灯效果很不错！

## 很满意

其实买东西还真得看品牌，机械键盘的牌子太多了，咱也不会挑选，所以无脑选择知名品牌吧，飞利浦的工业水准还是很高的，产品的品控把握的很好，一些小细节都拉得很满！比如连接线、说明书等，设计和用料都很用心了，130元的这个价位买到这样的键盘算是一次超值的购物体验。我问了客服有没有好评返现，客服说没有，我就懒得去写好评，这样吧，我就写在我的博客里吧。

原来用的罗技K480是2019年买的，用起来已经感觉很“费劲”了，打字的话需要使劲按键盘的键子，手指头都觉得很累！最近实在是受不了了，某东直接入手了一个PHILIPS机械键盘。

PHILIPS猛禽SPK8404机械键盘手感真是超赞！

原来的罗技K380键盘给老婆用了，但是键盘的F1-F2默认是一些功能键，用起来非常不习惯，所以需要恢复到原来Windows默认的功能，解决方法如下：

1. 下载罗技K380的键盘驱动：

下载地址：https://www.logitech.com/zh-cn/software/logi-options-plus.html#supported-keyboards

2. 安装后打开驱动设置，找到F1-12功能键设置的位置，锁定默认功能键即可。

然后就可以按F5快乐的刷新了。

原来的罗技K380键盘给老婆用了，但是键盘的F1-F2默认是一些功能键，用起来非常不习惯，所以需要恢复到原来Windows默认的功能，解决方法如下

罗技K380 F1-F12 功能键锁定

博客的页面需要一个返回顶部的功能，之前都是使用的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,使之隐藏和显示，进而实现了本次需求的所有功能。

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

罗技K380 F1-F12 功能键锁定

相关文章