Jump to content

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

Recommended Posts

  • Replies 10
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Screen Shot 2022-04-19 at 7.32.12 AM.png

Can you keep the code? I can check easier

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.