[Resolved] Add scroll to bottom

[Francis]

Hi, I see that the plugin has scroll to top button. But how can I add scroll to bottom as well without a plugin?

[Tom]

Hi there,

It depends where you want the link to be.

If you activate the Smooth Scroll option (https://docs.generatepress.com/article/smooth-scroll/), you can do this:

<a class="smooth-scroll" href="#footer-widgets">Scroll to Bottom</a>

[Francis]

Sorry my bad. What I mean is the opposite. Both having scroll to top and scroll to bottom at the same time. Is that possible without a plugin, just by adding some code under functions.php?

[Tom]

So having the buttons next to each other? Any examples I can look at?

[Francis]

I don’t have a sample site though. But this sample layout https://imgur.com/QLl7H9E is what I want to apply. Since most of my clients would want to have the flexibility to quickly get to the top or bottom of a page. Rignt now there is only scroll to top for generatepress. Is there a way I could add a scroll to bottom under it, without a plugin just by perhaps adding some codes via functions.php?

[Tom]

Would the scroll to bottom button always be visible, or would it show up when the back to top button shows up?

[Francis]

Yes, if possible I would need the scroll to bottom to show up as well, once the scroll to bottom appears.

[Tom]

Hi there,

The solution here is similar: https://generatepress.com/forums/topic/social-media-instagram-link-scroll-button-similar-to-gp-back-to-top-button/#post-530149

1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to after_footer
3. Add this as your hook content:

<div id="bottom"></div>
<a class="go-to-bottom" href="#bottom" style="opacity:0;visibility:hidden;">Bottom</a>

<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>

We can add the icon to the button, but it depends on whether you’re using font icons or SVGs?

4. Set the Display Rules to your entire site.

Now, add this CSS:

.go-to-bottom {
    font-size: 20px;
    border-radius: 3px;
    position: fixed;
    bottom: 30px;
    left: 30px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    z-index: 10;
    transition: opacity .3s ease-in-out;
    background-color: rgba(0,0,0,0.4);
    color: #fff;
}

.go-to-bottom:hover, 
.go-to-bottom:focus {
    background-color: rgba(0,0,0,0.6);
    color: #fff;
}

[Francis]

Cool. Thanks.

[Tom]

You’re welcome 🙂

[Author]

Posts