Create “Scroll to Bottom” Button

This topic has 7 replies, 3 voices, and was last updated 4 years, 5 months ago by Ying.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
April 26, 2021 at 10:31 am #1749898

Christian

Dear Support Team,

I am referring to this post:

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

and was able to add a functioning button to the website https://kanzeon.de

However,

1. instead of the text “to bottom” I would like to use a down chevron svg just like the up chevron inbuilt in GeneratePress (.gp-icon svg); and
2. Clicking the button jumps right to the bottom. If possible we would like to add the same smooth scroll to the “to bottom” button as is already present in the “to Top” button.

Thank you for guiding us,
Best,
Chris

April 26, 2021 at 11:39 am #1749978

Ying
Staff
Customer Support

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 🙂

April 26, 2021 at 12:16 pm #1750005

Christian

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

April 26, 2021 at 1:20 pm #1750042
Ying
Staff
Customer Support
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 🙂
April 27, 2021 at 2:52 am #1750499

Christian

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

April 27, 2021 at 3:48 am #1750555

David
Staff
Customer Support

Hi there,

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

April 27, 2021 at 4:33 am #1750597

Christian

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

April 27, 2021 at 9:30 am #1751191

Ying
Staff
Customer Support

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
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Support request] Create “Scroll to Bottom” Button

Popular Articles

[Support request] Create “Scroll to Bottom” Button

Popular Articles

Start building better websites today.