Button wont scroll to anchor if page is slightly moved

Hello,

There’s a CSS rule in your theme that sets the HTML overflow to hidden. This prevents the plugin from working properly. I’m not sure why this rule is there because it doesn’t affect the page design/layout.

To fix it, simply add the following to your additional/custom CSS:

html{
    overflow: visible;
}

Let me know

That does seem to fix it but then my scroll to top button disappears for some reason, and my page also wont autoscroll to top on refresh when adding that CSS

I see.

The scroll to top button disappearing can be fixed with a bit of javascript.

The page autoscroll to top on refresh can also be done with javascript but it is not standard browser behavior. Normally, when users refresh the page they expect to stay on the position they had scrolled to. I’m not sure why we would want to change that(?)

So, if you can add custom javascript in your pages, this is the script for the scroll to top button:

<script>
(function($){
	$(window).on("scroll",function(){
		var $this=$(this),
			$lmpixelsScrollToTop=$(".lmpixels-scroll-to-top");
		$lmpixelsScrollToTop.toggleClass("hidden-btn", $this.scrollTop() < 150);
	});
})(jQuery);
</script>

If also you want the scroll to top on page refresh behavior, change the script to:

<script>
(function($){
	$(window).on("load beforeunload",function(){
		$(this).scrollTop(0);
	}).on("scroll",function(){
		var $this=$(this),
			$lmpixelsScrollToTop=$(".lmpixels-scroll-to-top");
		$lmpixelsScrollToTop.toggleClass("hidden-btn", $this.scrollTop() < 150);
	});
})(jQuery);
</script>

You can add the script in your template (e.g. in your theme/child-theme footer.php) or in a custom javascript box (without the <script></script> tags) if your theme (or some other plugin) provides one.

I can also give you the PHP code if you want to add the script via functions.php, so let me know.

That worked wonderfully. I really appreciate your help with this!

• This reply was modified 1 year ago by garyholmgren.

Glad I helped ??