question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Back To Top functionality doesn't work with Scrollbars

See original GitHub issue

Hello! There is a bug or configuration conflict. My website theme has Back To Top button. I’m using Gantry 5 Framework based on Grav CMS. Here is a demo, how the Back to top function is made:

The problem is that on my website Back To Top doesn’t work once OverlayScrollbars is loaded. Clicking on anchor makes nothing and there are no errors in the console.

I’m initializing scrollbars like this:


$(function() {	
	$("body").overlayScrollbars({
          className: "os-theme-light custom-scroll",
        });
});

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
KingSoracommented, Jun 7, 2021
function backToTopBtnClick() {
  var osInstance = $('body').overlayScrollbars();
  if (OverlayScrollbars.valid(osInstance)) {
    osInstance.scroll({ top: 0 }, 1000);
  }
  else {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
}
0reactions
01Kuzmacommented, Jun 7, 2021

@KingSora thank you! I’ve added the onclick="backToTopBtnClick();" event to a link, everything works just fine 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Back to top button not triggering properly - Stack Overflow
I have a back to top button that appears when you scroll a little bit .It's working fine but when scrolling if I...
Read more >
How to Fix Scroll Bar Jumps To Top When ... - The Geek Page
For instance, you open the File Explorer and try to scroll down, but the scroll bar doesn't go down. It's stuck at the...
Read more >
How to Make a Back to Top Button and Page Progress Bar ...
Here, the scrollContainer function returns document.documentElement , which is nothing but the HTML element of our document. In case that is not ......
Read more >
scroll-behavior - CSS: Cascading Style Sheets - MDN Web Docs
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs ...
Read more >
Bootstrap Scroll To Top Button - free examples & tutorial
Create a button that appears when you start scrolling and on click smooth scrolls you to the top of the page. To learn...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found