MIP GoToTop
mip-gototop
是一个自定义的 CSS 类,用于创建一个可滚动页面时跳转到顶部的小按钮。它可以隐藏在页面中,只有在用户将鼠标悬停在其上时才会显示出来。
特点
display: none !important;
:该按钮默认是隐藏的,通过设置为display: none !important;
,可以确保它在页面上不可见。border-radius: 5px;
:按钮的边框弧度设置为 5 像素,使其看起来更加圆润。width: 36px; height: 36px;
:按钮的尺寸为 36x36 像素,适合在小屏幕设备上使用。background-size: 50% 50%; background-repeat: no-repeat; background-position: 50% 50%;
:按钮的背景图像大小和位置设置为居中显示,确保按钮在整个页面上居中。border: 1px solid #999;
:按钮的边框宽度设置为 1 像素,颜色为灰色 (#999),增加按钮的可视性。background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAA8CAYAAADYIMILAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUClfSBKdLAAJAABAAAAHjaXR5cQEAAAAASUVORK5CYII=);
:按钮内部的背景图像是一个小三角形,通过 base64 编码的 PNG 图像提供,确保在各种浏览器上的兼容性。
用法
要使用 mip-gototop
,只需将其添加到您的 HTML 页面中的任何位置即可。以下是一个示例代码段,演示如何将该按钮放置在页面底部的固定位置:
<div style="text-align: center;">
<button class="mip-gototop">Go to Top</button>
</div>
您可以根据需要调整按钮的位置和其他样式属性来适应您的页面。请记住,在使用此按钮之前,您需要先引入 MIP.js 库以使功能正常工作。