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

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


logorado

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

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

Link to comment
  • 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?

Link to comment
  • 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?

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

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

Link to comment
  • 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/

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

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

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