Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 8
logorado

How can I add a "Scroll to top" button?

Question

Recommended Posts

  • 0

@neeklamy ok, so that css button wasnt working, so i added in a jpg


 background:url('http://static.squarespace.com/static/51ca14b0e4b014f2c6e0c3d8/t/52323f1de4b0c34b2a143a98/1379024669667/arrow%20small.jpg') no-repeat;


and it doesnt seem to be showing. The link loads by itself though, but its not showing behind the text.

Edited by jddowell

Share this post


Link to post
  • 0

Using what neeklamy said, you can select Content Manager, select the blog page, select Blog Settings, then choose the Advanced tab. Scroll to the bottom and you'll see Post Blog Code Injection. Paste Back to top and it will put the words "Back to top" as a link at the end of every blog post/excerpt.

Share this post


Link to post
  • 0

It's not my intention to exhibit any bad attitude, I was just letting you know that your solution is not feasible because it would spam the page with as many buttons as blog posts are showed which is not at all user/design friendly.

I did try a couple of methods both posted on this website and from other sources as well and none of them yields great results. I had issues with the Post Blog Code before and I'm trying to avoid using it because it tends to multiply any code placed there.

Share this post


Link to post
  • 0

Is there any way where I can keep the scroll up button but add a "back to home" button on the left side of the page? I want it to show up in the same manner the "scroll to top" button is, I just don't know how to make it exist along side it.

So, essentially, I want both a "scroll to top" button and a "back to home" button to appear at the same time.

Is this possible?

Share this post


Link to post
  • 0

As HammaadM stated:


 <a href="#" class="scrollup">Scroll</a>

does the trick. However, I wanted to get my text to be centered, so I ended up adding some stuff to it and it ended like below:


<div style="text-align:center">    
 <a href="#">Back to Top</a>
</div>

Share this post


Link to post
  • 0

When I look at the mobile end my icon is all the way to the left side when on desktop it's on the right hand side anyway to fix the alignment on mobile?

Share this post


Link to post
  • 0

If I want the icon to be centered on the page in both desktop on mobile versions what CSS variants need to be changed?Right now with this code:

.scrollup { width: 40px; height: 40px; opacity: 0.9; bottom: 25px; left: px; position: fixed; z-index:100; display: none; background: url('http://static.squarespace.com/static/53e29465e4b09d387c666792/t/541f7527e4b02b592c3dbdfd/1411347751880/scrollarrow.png') no-repeat;}

It appears somewhat centered but slightly off to the right?

Share this post


Link to post
  • 0

Could you post a link to the page where you’ve added this?


The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me.

Share this post


Link to post
  • 0

HeathersBerto's answer is by far the best.

Just a small tip for those who are struggling to get the fontawesome icon on top of the hero images of some templates:

the z-index of those hero images is set to 99 by default, so just change your fontawesome CSS z-index to 100

Share this post


Link to post
  • 0

The above "hide scroll button on mobile" does not do anything. I am adding it to the "sitewide" custom css. Is there not a way to simply target the scroll button on mobile and choose display: none? There is no point in having a scroll to top on mobile as it's so easy to scroll, and it gets in the way of clickable links and verbage.

Thank you al

Share this post


Link to post
  • 0

This answer makes no sense to me... can you please explain where to put the other two @media only screen lines? I need help with hiding on mobile, because a back to top is pointless on mobile

What does "codes several scroll buttons" mean? I have 1 image ('url') taking the place of the scroll up "black box", inserted into the custom css. I have the script in the code injection and the "class=scrollup code in the footer. it is functioning fine, I just need it hidden on mobile

http://www.godbyhearth.com/

Share this post


Link to post
  • 0

This was so simple and easy! Thank you!

I got it to show up at the footer section of my website. Is there a simple way to get it to float dynamically while scroll through a blog post?

Share this post


Link to post
  • 0

Hello everyone!

So I was able to get a button to show at the bottom of my site which is a great start. I used @Harjot solution which was getting a code from the following website and pasting it into the Code Injection Footer section: http://www.scrolltotop.com/

My question now is how to simply get the button to float dynamically in blog posts as users are reading instead of just at the bottom of the site.

Thanks a bunch everyone!Wish I took more coding class back in school haha

Share this post


Link to post
  • 0

Hello everyone!

So I was able to get a button to show at the bottom of my site which is a great start. I used @Harjot solution which was getting a code from the following website and pasting it into the Code Injection Footer section: http://www.scrolltotop.com/

My question now is how to simply get the button to float dynamically in blog posts as users are reading instead of just at the bottom of the site.

Thanks a bunch everyone! Wish I took more coding class back in school haha

Share this post


Link to post
  • 0

But there is still one thing that´s a problem...You have to type one line more in your head.

So that the complete Script part have to sound like this:


    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
   <script>
       $(document).ready(function () {
       $(window).scroll(function () {
       if ($(this).scrollTop() > 100){$('.scrollup').fadeIn();}
       else {$('.scrollup').fadeOut();}});
       $('.scrollup').click(function () {
       $("html, body").animate({scrollTop: 0
       }, 600);
       return false;});});
   </script>


and than it should work ;D

Edited by Johann_Okt

Share this post


Link to post
  • 0

@expeditionjojo

I had great success with this solution and the scroll to top button appeared on every webpage just as I wanted it to, but I've recently lost the button. It no longer appears on my site. Have you experienced something similar?

~Jon

Edited by Jonsolotravels
Initial Revision

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...