How can I add a "Go To Bottom" or "Jump to Top" button to my blog?

Site URL: https://www.jenellekappe.com/blog

I have the Montauk template and i was hoping there was a way that I could add a button somewhere, perhaps the sidebar so that my clients can jump right to the bottom of the page (and not have to scroll thro the entire blog post) in order to hit the next bog post and/or see the archive listing of past blog posts. Is there a way to do this?

On 4/14/2022 at 11:45 PM, jnkappe said:

Site URL: https://www.jenellekappe.com/blog

I have the Montauk template and i was hoping there was a way that I could add a button somewhere, perhaps the sidebar so that my clients can jump right to the bottom of the page (and not have to scroll thro the entire blog post) in order to hit the next bog post and/or see the archive listing of past blog posts. Is there a way to do this?

Hi,

This is possible with some custom code

Do this for all posts or specific post?

and do you use Personal or Business Plan?

Great! Thank you!

this would be for all blog posts and right now I just have the personal plan. 

21 hours ago, jnkappe said:

Great! Thank you!

 

this would be for all blog posts and right now I just have the personal plan. 

 

 

Edit Site Footer > Add a Code Block > Paste this code

<a href="#comments" class="tp-bottom">Jump to bottom</a>

Next, add this to Design > Custom CSS

a.tp-bottom {
    position: fixed;
    right: 0;
    z-index: 9999;
    top: 50%;
    transform: translateY(-50%);
    color: #000 !important;
    font-size: 30px;
    opacity: 1;
}
body:not(.collection-type-blog) a.tp-bottom {
	visibility: hidden;
}

thank for helping. that didn't seem to do it. 

it leaves a large "jump to bottom" type on the right side of the page, but only for the main blog page. not for each blog post. 

when i clicked on it, it didn't move either. 

On 4/19/2022 at 6:35 PM, jnkappe said:

thank for helping. that didn't seem to do it. 

it leaves a large "jump to bottom" type on the right side of the page, but only for the main blog page. not for each blog post. 

when i clicked on it, it didn't move either. 

Can you keep the code? I can check easier

If your site is live, you can duplicate the site & add there

The only section it doesn't work is on the main blog page. Before you click into each individual blog post. 

https://www.jenellekappe.com/blog

Is there a way to make it an attractive button instead of the words?

Thank you!

16 hours ago, jnkappe said:

The only section it doesn't work is on the main blog page. Before you click into each individual blog post. 

https://www.jenellekappe.com/blog

Is there a way to make it an attractive button instead of the words?

 

Thank you!

The id in the code #comments, exist on individual posts only, so it can't work on Blog Page. Do you need to hide it on blog list?

To make button, add to Design > Custom CSS
 

/* jump to bottom text to button */
a.tp-bottom {
    background-color: black;
    color: white !important;
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

yes, if i could hide it on the main blog page, that would be amazing. thank you so much for all your help! 

On 4/25/2022 at 5:19 AM, jnkappe said:

yes, if i could hide it on the main blog page, that would be amazing. thank you so much for all your help! 

Add this CSS to hide button on blog list page

body[class*="type-blog"].view-list a.tp-bottom {
	display: none !important;
}

thank you!!!!