Create "Scroll to Bottom" Button

Hi Chris,

Did you add this for the button? <a class="smooth-scroll" href="#footer-widgets">Scroll to Bottom</a>

If so, you could use this instead: <a class="smooth-scroll" href="#footer-widgets"><svg aria-hidden="true" role="img" height="1em" width="1em" viewbox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg></a>

For the smooth-scrolleffect, go to Customizer > General , tick the Smooth scroll box.

Let me know :)

Hi Ying,

incredible, how fast you reply. Thank you so much.

No, I did not add the class to the button. As pointed out in the referenced link

https://generatepress.com/forums/topic/add-scroll-to-bottom/

wanting to have a "scroll to Top" AND "scroll to bottom" button, I added this code to the "after-footer" hook.

Bottom

<script>
( function() {
'use strict';

// Feature Test
if ( 'querySelector' in document && 'addEventListener' in window ) {

var trackScroll = function() {
var instaButton = document.querySelector( '.go-to-bottom' );
var scrolled = window.pageYOffset;
var coords = 300;

if ( scrolled > coords ) {
instaButton.style.opacity = '1';
instaButton.style.visibility = 'visible';
}

if (scrolled < coords) {
instaButton.style.opacity = '0';
instaButton.style.visibility = 'hidden';
}
}
window.addEventListener( 'scroll', trackScroll );

}

} )();
</script>

and added some css.

In the above post, Tom pointed out: "We can add the icon to the button, but it depends on whether you’re using font icons or SVGs?" - so there must be some solution to just add the chevron down icon to the php-code.

And this button should behave as the "to Top" button in terms of smooth scrolling.

Sorry for any confusion I am causing and very much looking forward your advice,
Best,
Chris

Try this code instead, but you'll still need to enable smooth scroll in customizer.

<div id="bottom">
<a class="go-to-bottom smooth-scroll" href="#bottom" style="opacity:0;visibility:hidden;"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg></a>
</div>
<script>
	( function() {
	    'use strict';

	    // Feature Test
	    if ( 'querySelector' in document && 'addEventListener' in window ) {

			var trackScroll = function() {
				var instaButton = document.querySelector( '.go-to-bottom' );
				var scrolled = window.pageYOffset;
				var coords = 300;

				if ( scrolled > coords ) {
					instaButton.style.opacity = '1';
					instaButton.style.visibility = 'visible';
				}

				if (scrolled < coords) {
					instaButton.style.opacity = '0';
					instaButton.style.visibility = 'hidden';
				}
			}
			window.addEventListener( 'scroll', trackScroll );

	    }

	 } )();
</script>

Let me know :)

Hi Ying, thanks again for your fast reply.
Everything is working technically now - however I would need a chevron-down-svg like this:
https://icons.getbootstrap.com/icons/chevron-down/
I tried to work its code into the above php - however to no avail (the svg is not visible).
Could you help me out with this technical matter?

Thank you, Best, Chris

Hi there,

did you resolve the issue ? As i can see both the Up and Down arrows

Hi David,

the up "thing" is a chevron, the down "thing" is an arrow - so visually not the same. We need the same svg's - best is down chevron like here:

https://icons.getbootstrap.com/icons/chevron-down/

Thank you for your help,
Best,
Chris

I replaced the SVG in the code with the one you like, edited code here:
https://generatepress.com/forums/topic/create-scroll-to-bottom-button/#post-1750042