how do implment scrollTo certain section ?

[sandeshsapkota]

Hi !

I have a button when clicking I want to scroll to certain section. I can see somewhere that smooth scrollbar provides the function to do the scrollTo functionality.

I have implemented the scrollbar functionality in react.

But It shows me error when I do the following

import Scrollbar from 'smooth-scrollbar-react';

const Banner = () => {
    const scrollToNextSection = () => Scrollbar.scrollTo(0, 800);

    return (
        <section className="banner">
            <div className="container">
                <button className="banner-btn" onClick={() => scrollToNextSection()}>
                   Scroll TO Button
                </button>
            </div>
        </section>
    )
}

export default Banner

scrollbar implementation.

here is the code for the Scroll component

import { useEffect } from 'react';
import Scrollbar from 'smooth-scrollbar';
import OverscrollPlugin from "smooth-scrollbar/plugins/overscroll";

const overscrollOptions = {
    enable: true,
    effect: 'glow',
    damping: 0.15,
    maxOverscroll: 150,
    glowColor: '#E5E5E5',
};

const options = {
    damping : 0.07,
    plugins: {
        overscroll: { ...overscrollOptions },
    },
}

const Scroll = () => {
    useEffect(() => {
        Scrollbar.use(OverscrollPlugin);
        const element:HTMLElement | null= document.body.querySelector('.main-scrollbar')
        if(element) {
            Scrollbar.init(element, options);
            if(Scrollbar.scrollTo) {
                Scrollbar.scrollTo(0, 1000);
            }
        }
        return () => {
            if (Scrollbar && element) Scrollbar.destroy(element)
        }  },
        [])
    return null;
}

export default Scroll;

[sadeghbarati]

Hi 👋
The best way is to use your own implementation

You have to store smooth-scrollbar instance in something like useRef
please refer to API section scrollIntoView

import { useEffect, useRef } from "react";
import SmoothScrollbar from "smooth-scrollbar";
import OverscrollPlugin from "smooth-scrollbar/plugins/overscroll";

const overscrollOptions = {
  enable: true,
  effect: "glow",
  damping: 0.15,
  maxOverscroll: 150,
  glowColor: "#E5E5E5",
};

const options = {
  damping: 0.07,
  plugins: {
    overscroll: { ...overscrollOptions },
  },
};

const Scroll = ({ children }: { children: React.ReactNode }) => {
  const scrollbarInstance = useRef<SmoothScrollbar | null>(null);
  const mainScrollbar = useRef<HTMLElement | null>(null);

  useEffect(() => {
    if (typeof window === "undefined") {
      return;
    }
    if (mainScrollbar.current) {
    
      /*** Store scrollbar instance ***/
      scrollbarInstance.current = SmoothScrollbar.init(mainScrollbar.current!, options);
    }
    return () => {
      if (scrollbarInstance.current) scrollbarInstance.current.destroy();
    };
  }, []);

  function scrollToSpecificSection() {
  
     /*** Scroll to a certain section ***/
     scrollbarInstance.current.scrollIntoView(el, options)
  }
  
  return (
    <div ref={mainScrollbar}>
      <div>{children}</div>
    </div>
  );
};

export default Scroll;