移动端网页固定底部按钮交互需求：下滑隐藏，上滑显示

Got it, let's make that fixed button behave exactly how you want—hiding when scrolling down and showing when scrolling up. Here's a straightforward, lightweight implementation using vanilla JavaScript (no frameworks needed, perfect for mobile):

Step 1: Tweak Your HTML for Easier Targeting #

First, let's add a specific class to the button container so we can easily reference it in our code. I'll add scroll-btn-container to the <a> tag:

<a href="/form" class="fixed-bottom scroll-btn-container">
  <button type="submit" style="margin-left: auto;margin-right: auto;display: block;" name="submit" class="btn btn-primary">Submit</button>
</a>

Step 2: Add CSS for Smooth Animations #

We'll use CSS transitions to make the show/hide effect feel polished, plus a helper class to hide the button by sliding it off the screen:

/* Base styles for the button container */
.scroll-btn-container {
  transition: transform 0.3s ease-in-out; /* Smooth slide animation */
}

/* Class to hide the button (push it down off the screen) */
.scroll-btn-container.btn-hidden {
  transform: translateY(100%);
}

Step 3: JavaScript to Track Scroll Direction #

Now we need to listen for scroll events, compare the current scroll position to the previous one, and toggle the hide class based on direction:

// Store the last scroll position
let prevScrollPos = window.scrollY;

// Listen for scroll events
window.addEventListener('scroll', () => {
  const currentScrollPos = window.scrollY;
  
  // Check scroll direction
  if (prevScrollPos < currentScrollPos) {
    // Scrolling down: hide the button
    document.querySelector('.scroll-btn-container').classList.add('btn-hidden');
  } else {
    // Scrolling up: show the button
    document.querySelector('.scroll-btn-container').classList.remove('btn-hidden');
  }
  
  // Update the previous scroll position for the next iteration
  prevScrollPos = currentScrollPos;
});

How This Works: #

• We start by saving the initial scroll position in prevScrollPos
• Every time the user scrolls, we compare the current scroll position to the saved one
• If they're scrolling down (current position > previous), we add the btn-hidden class to slide the button out of view
• If they're scrolling up (current position < previous), we remove the class to slide it back in
• The CSS transition ensures the movement is smooth instead of jarring

Quick Mobile Notes: #

• This works flawlessly on mobile devices—vanilla JS and CSS are fully supported across all modern mobile browsers
• The existing fixed-bottom class (I assume from Bootstrap) keeps the button anchored to the bottom, which pairs perfectly with our scroll logic

内容的提问来源于stack exchange，提问作者SinaValipour