Home > widget-integration > FilterController > setupScrollToTopButton

FilterController.setupScrollToTopButton() method

Sets up the scroll-to-top button behavior. Shows or hides the button based on scroll position with a 300px threshold.

The button becomes visible when the user scrolls down more than 300 pixels and is hidden when scrolling back to the top. Uses debouncing (200ms) for performance optimization.

Signature:

setupScrollToTopButton(): void;

Returns:

void

Remarks

The scroll listener is debounced to avoid excessive DOM manipulation during scroll events. The 300px threshold provides a good balance between visibility and user experience.

Example

Override to customize scroll threshold or button behavior:

window.boostWidgetIntegration.extend('FilterController', (FilterController) => {
  return class CustomFilterController extends FilterController {
    setupScrollToTopButton() {
      const customThreshold = 500; // Custom threshold
      const debounced = this.filterHelper.debounce(() => {
        const btn = this.filterStore.getState('document')
          .querySelector('.boost-sd__scroll-to-top');
        if (btn) {
          // Add fade animation
          btn.style.opacity = window.scrollY > customThreshold ? '1' : '0';
          btn.style.display = window.scrollY > customThreshold ? 'block' : 'none';
        }
      }, 200);
      window.addEventListener('scroll', debounced);
    }
  };
});