滑到底部自动隐藏悬浮按钮，纯CSS和微信小程序解决方案

2024-02-23 08:53:15

悬浮按钮：提升用户体验的滑动自动隐藏指南

简介

在网页设计中，悬浮按钮通常用作引导用户执行操作的元素，例如返回顶部、添加购物车等。为了提高用户体验，许多网站会设计悬浮按钮，当用户向下滚动页面时，悬浮按钮会自动隐藏，避免干扰用户浏览内容。

实现方法

1. CSS 实现

步骤 1：创建悬浮按钮元素

<button class="floating-button">回到顶部</button>

步骤 2：设置悬浮按钮位置

.floating-button {
  position: sticky;
  bottom: 10px;
  right: 10px;
  z-index: 10;
}

步骤 3：隐藏悬浮按钮

.floating-button {
  position: sticky;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  top: -100vh;
}

步骤 4：显示悬浮按钮

window.addEventListener('scroll', function() {
  if (window.pageYOffset > 100) {
    document.querySelector('.floating-button').style.top = '10px';
  } else {
    document.querySelector('.floating-button').style.top = '-100vh';
  }
});

2. 微信小程序实现

步骤 1：创建悬浮按钮元素

<view class="floating-button" bindtap="backToTop">回到顶部</view>

步骤 2：添加 scroll-view 组件

<scroll-view scroll-y="true">
  <!-- 页面内容 -->
</scroll-view>

步骤 3：显示悬浮按钮

Page({
  data: {
    showFloatingButton: false
  },
  onLoad() {
    this.scrollView = this.selectComponent('#scroll-view');
  },
  scroll(e) {
    if (e.detail.scrollTop > 100) {
      this.setData({
        showFloatingButton: true
      });
    } else {
      this.setData({
        showFloatingButton: false
      });
    }
  },
  backToTop() {
    this.scrollView.scrollTo({
      scrollTop: 0
    });
  }
});