URL with hash links web.com#someID doesn't load in the right position

[HectorLS]

Environment

• Browser: Chrome Version 62.0.3202.94 (Official Build) (64-bit)
• Version of smooth-scrollbar: ^7.3.1 and higher (have same issue with the last version in another project)

Issue Summary

Accesing the webpage with a #link doesn't scroll to the section with that ID

Expected Behavior

If you go to the webpage.com/#someID the page would load and be positioned in the page section where that someID had been set.

[idiotWu]

This feature is not suitable for this lib since it has no idea where you initialize scrollbar to. Also it has never been designed for root scrollbar replacement. You should implement this feature yourself.

[HectorLS]

Ok, noted😉
This is gonna be a scrollbar framework soon or later haha

[idiotWu]

Hint: this could be done with scrollbar.scrollIntoView() method.

[HectorLS]

What i did was basically

1. run/init smooth-scrollbar at the beginning
2. check if the URL has a hashtagsomeLink -> domain.com/#someLink
3. If so, take the position of the element.
4. use the scrollTo method

I prefer to used the scrollTo so i can add some offset in case i needed.

[idiotWu]

Actually you can also add offsets while using scrollIntoView method 😁.

[HectorLS]

Really ? i didn't see that in the Doc, awesome!!!

[idiotWu]

It does! Look at the "Details" section!

[idiotWu]

If you are adding anchors support, I'd suggest you also register a listener for hashchange event 😁.

[HectorLS]

If you are adding anchors support, I'd suggest you also register a listener for hashchange event 😁

I didn't know that listener exists ! that gonna simplify the logic a lot !

refactor is coming haha thank you so much.

[HectorLS]

Hi again @idiotWu , in the past the behavior of the smooth-scrollbar was ignore the hash #
So ok, i manage the rest using:

  // Scroll to if HASH element
  // -------------------------
  // where  scroller is the smooth-scrollbar and touchDevice is a boolean 
  // because i use native scroll on touch devices.
  const hash = window.location.hash;
  if(!!hash) {
    const id     = hash.substring(1);
    const target = document.getElementById(id);
  
    if(!!target) {
      const targetPosition = target.getBoundingClientRect();
  
      if(!touchDevice) {
        // Smooth-scrollbar scroll
        setTimeout(() => {
          scroller.scrollTo(0, targetPosition.top, 600);
        }, 300);
      }
    }
  }

But now with the "smooth-scrollbar": "^8.2.5" version

Sometimes the smoot-scrollbar ignore the hash, but others initialized the web with the hash element at the top, but as this element were the first one.

web.com#someID
the smoot-scrollbar set the someID at offset 0, 0
and i cannot scroll up more than tat element, so previous content is not accesible 😢

Weird point is that it's behave randomly, sometimes ignore the hash ( which is perfect, i manage it later, but sometimes dont)

As a temp fix i'm:

1. Removing hash from the URL if have it without refresh page
2. Initialize Smoot-Scrollbar
3. Add back the hash to the url
4. ScrollTo the element if exist ( previous snippet )

But i don't really like this temp fix because it's messing with the browser history

  init() {
    const hash = window.location.hash;
    if (!hash) {
      window.scrollTo(0, 0);
    }
    history.pushState(null, null, window.location.pathname);

    if (!!scrollbarWrapper) {
      this.scroller = Scrollbar.init(scrollbarWrapper, options);
      history.pushState(null, null, window.location.pathname + hash);
    }
  }

[idiotWu]

I think this issue is related to initializing orders. What about using plugin system:

class AnchorPlugin extends ScrollbarPlugin {
  static pluginName = 'anchor';

  onInit() {
    // go to anchor
  }
}

P.S. IMO requestAnimationFrame might be better than setTimeout(cb, 300), because rAF will be called after DOM is ready.

P.P.S. the above HashPlugin acts actually the same as:

const scrollbar = Scrollbar.init(elem, options);

requestAnimationFrame(() => {
  // go to anchor
});

see

smooth-scrollbar/src/scrollbar.ts

Lines 204 to 207 in 8171ddd

	// wait for DOM ready
	requestAnimationFrame(() => {
	this._init();
	});

[idiotWu]

AnchorPlugin:

import { ScrollbarPlugin } from 'smooth-scrollbar';

class AnchorPlugin extends ScrollbarPlugin {
  static pluginName = 'anchor';

  onHashChange = () => {
    this.jumpToHash(window.location.hash);
  };

  onClick = (event) => {
    const { target } = event;

    if (target.tagName !== 'A') {
      return;
    }

    const hash = target.getAttribute('href');

    if (!hash || hash.charAt(0) !== '#') {
      return;
    }

    this.jumpToHash(hash);
  };

  jumpToHash = (hash) => {
    const { scrollbar } = this;

    if (!hash) {
      return;
    }    

    // reset scrollTop
    scrollbar.containerEl.scrollTop = 0;

    scrollbar.scrollIntoView(document.querySelector(hash));
  };

  onInit() {
    this.jumpToHash(window.location.hash);

    window.addEventListener('hashchange', this.onHashChange);

    this.scrollbar.contentEl.addEventListener('click', this.onClick);
  }

  onDestory() {
    window.removeEventListener('hashchange', this.onHashChange);

    this.scrollbar.contentEl.removeEventListener('click', this.onClick);
  }
}

// usage
Scrollbar.use(AnchorPlugin);

Demo: https://codesandbox.io/s/anchor-plugin-u6cy6?file=/src/anchor-plugin.js

[idiotWu]

Hey, I think I finally figured out the reason: when an anchor is clicked, container.scrollTop changed once though the layout appears to be the same:

So the fix is:

// reset scrollTop...
scrollbar.containerEl.scrollTop = 0;
// ...then scroll to the target
scrollbar.scrollIntoView(document.querySelector(hash));

[AirFast]

Hello! For some reason in firefox, it anchors the anchor to position 0.

    var urlHash = window.location.hash;

    if ($(urlHash).length) {
        requestAnimationFrame(function () {
            console.log('scrollTop:', siteScrollbar.containerEl.scrollTop);

            siteScrollbar.scrollIntoView(document.querySelector(urlHash), {
                offsetTop: -siteScrollbar.containerEl.scrollTop + 30,
            });
        });
    }

[GeorgeStudio96]

I need to use the anchor reference method. I have a header and I want to navigate the page by clicking on these links. I have tried the method described above and when I refresh the page it immediately flips to a certain "hash". But how do I execute this event only when I click on the specified link? Tell me please

[GeorgeStudio96]

Здравствуйте! По какой-то причине в firefox он привязывает якорь к позиции 0.

    var urlHash = window.location.hash;

    if ($(urlHash).length) {
        requestAnimationFrame(function () {
            console.log('scrollTop:', siteScrollbar.containerEl.scrollTop);

            siteScrollbar.scrollIntoView(document.querySelector(urlHash), {
                offsetTop: -siteScrollbar.containerEl.scrollTop + 30,
            });
        });
    }

could you help with the question above?

[GeorgeStudio96]

Hey, I think I finally figured out the reason: when an anchor is clicked, container.scrollTop changed once though the layout appears to be the same:

So the fix is:

scrollbar.scrollIntoView(document.querySelector(hash), {
  offsetTop: -scrollbar.containerEl.scrollTop,
});

Hi, can you please help me with the anchor links in the smoothscrollbar script?

[masnormen]

Hi, I solved this problem by using the following code. Seems to be fine in [email protected]. Though if anyone can improve, kindly edit this code!

// For newly opened link (e.g in new tab)
const hash = window.location.hash;
const scrollbar = Scrollbar.init(document.body, {
  continuousScrolling: false,
  alwaysShowTracks: true,
  plugins: {}
});
if (hash) {
  const target = document.getElementById(hash.substring(1));
  if (target) {
    scrollbar.scrollIntoView(target, {
      offsetTop: -scrollbar.containerEl.scrollTop,
    });
  }
}

// For opening link in the same page
window.addEventListener('hashchange', function () {
  const hash = window.location.hash;
  if (hash) {
    const target = document.getElementById(hash.substring(1));
    if (target) {
      scrollbar.scrollIntoView(target, {
        offsetTop: -scrollbar.containerEl.scrollTop,
      });
    }
  }
}, false);

[oleksyoleksy]

Hi @masnormen, your solution ended my struggle:

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

let overscrollOptions = {
  enable: true,
  effect: 'bounce',
  damping: 0.15,
  maxOverscroll: 150,
};

let options = {
  continuousScrolling: false,
  alwaysShowTracks: true,
  damping: 0.07,
  plugins: {
    overscroll: {
      ...overscrollOptions
    }
  }
};

const SmoothScroll = () => {

  useEffect(() => {

    Scrollbar.use(OverscrollPlugin);

    // For newly opened link (e.g in new tab)
    const hash = window.location.hash;
    const scrollbar = Scrollbar.init(document.body, options);
    if (hash) {
      const target = document.getElementById(hash.substring(1));
      if (target) {
        scrollbar.scrollIntoView(target, {
          offsetTop: -scrollbar.containerEl.scrollTop,
        });
      }
    }

    // For opening link in the same page
    window.addEventListener('hashchange', function () {
      const hash = window.location.hash;
      if (hash) {
        const target = document.getElementById(hash.substring(1));
        if (target) {
          scrollbar.scrollIntoView(target, {
            offsetTop: -scrollbar.containerEl.scrollTop,
          });
        }
      }
    }, false);

    return () => {
      if (Scrollbar) {
        Scrollbar.destroy(document.body)
      }
    };

  }, []);

  return null;

};


export default SmoothScroll;

[masnormen]

Glad it did!

[Nikolasgrizli]

what worked in the sandbox didn't work in my project. (mb because of the -17vs18 version of the react, mb because of gatsby or my crooked hands, or maybe moon in capricorn).
It was solved through magical calls to the child component with a callback instead of return
Wrapper.jsx:

export const Wrapper: FC<React.PropsWithChildren<any>> = ({ children }) => {
const scrollbar = useRef<BaseScrollbar | null>(null);
return (
<Scrollbar ref={scrollbar}>
       {children(scrollbar)}
</Scrollbar>

index.jsx:

const IndexPage: React.FC<PageProps> = () => {
return (
    <Wrapper>
      {(scrollBar)=>{
        return(
          <>
            <ButtonToScroll onClick={()=>(scrollBar.current.scrollIntoView(myAnchorRef.current))}/>
           )
      }}
    </Wrapper>
  );
};

my package.json

 "dependencies": {
    "@heroicons/react": "^2.1.1",
    "@material-tailwind/react": "^2.1.9",
    "autoprefixer": "^10.4.17",
    "gatsby": "^5.13.2",
    "gatsby-plugin-image": "^3.13.1",
    "gatsby-plugin-manifest": "^5.13.1",
    "gatsby-plugin-postcss": "^6.13.1",
    "gatsby-plugin-react-svg": "^3.3.0",
    "gatsby-plugin-sharp": "^5.13.1",
    "gatsby-plugin-sitemap": "^6.13.1",
    "gatsby-source-filesystem": "^5.13.1",
    "gatsby-transformer-sharp": "^5.13.1",
    "postcss": "^8.4.33",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "smooth-scrollbar": "^8.6.2",
    "smooth-scrollbar-react": "^2.3.0",
    "tailwindcss": "^3.4.1"
  },
  "devDependencies": {
    "@types/node": "^20.11.5",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "prettier": "^3.2.5",
    "typescript": "^5.3.3"
  },