Antenna 7 and scroll to top

[prem]

In my case I have a menu bar just below my header and a few other bits.

If any part of that menu is showing, then the scroll to top icon will not show. This means you need to use the scroll bars instead. At the moment I have a top of page button which will take the user to the top of the page. The only problem with mine, is that it is showing all the time, even if the page is a short page.

In the scroll to top. It would be nice to be able to have some adjustments to be able to get round this. At the moment the only adjustments seem to be the X and Y position.

Prem

[prem]

Jason,

I don't know whether you have seen this post, but I have been trying to use your scroll to top button and I find I have to scroll further than 200 pixels for the scroll to top button to show.
This means you need to use the scroll bars at the side or on a mobile the touchscreen to scroll back to top.

Is it not possible to set the minimum scrolled pixels to 10 instead of 200. This would make it work better for a mobile.

Prem.

[J]

Hi Prem,

At the moment it's a preset value. But I can look into the possibility of customising it. General guidelines for scroll-to-top is to display the button only after a visitor has scrolled down a few page lengths. For shorter distances scrolling is more natural. So Antenna might be displaying the button a bit early.

Can you post a link to your web page with the menu bar and scroll-to-top?

Cheers,
J

[prem]

Hi Jason,

Sorry for the delay but I had to put the scroll to top button in and then load the site up. This I had not done because I did not feel that the button was working at its best.

It's now on my website which is: www.g0dcp.co.uk.

The only reason I made my suggestions is mainly for mobile users because my menu is on two lines and the button only shows when you have got past the first menu line. You will see what I mean if you view it with a mobile.

Regards
Prem

[J]

Thanks for posting the link. I've added some ideas and your suggestions to the wishlist!

Cheers,
J

[prem]

Thanks Jason.

Regards,
Prem

[jobey]

Hello
Another easier workaround for now is using the 'internal page' bookmarking option in antenna.
Make a link from a text link at the bottom of a page that when clicked will shoot the viewer to a corresponding text link made at the top of the page.

[prem]

Hi jobey,

Thanks very much for your idea but I'm afraid I already beat you to it. I have been using the internal link for many years, way back in the early HTML days.

It's just that Jason's new link to the top of page is absolutely ideal for mobiles and is also useful for larger displays. With Jason's method. When you have read what you want to read. It doesn't matter whereon the page you can go to the top of the page. With my method the link always has to be in the footer. Or at least is best in the footer.

Thanks all the same for your suggestion.

Regards,
Prem

[loes]

I have been using a script (Frank showed it to me) that will display a "Back to Top" arrow when you have scrolled so far that part of the top is no longer visible. It's a visual HTML object, placed somewhere at the top of the page.

Perhaps you can try if that works for you too.

---

HTML Code for BODY SECTION:

<!-- BackToTop Button -->
<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Top<span></span></a>



HTML Code for HEAD SECTION:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
   $(window).scroll(function(){
       if ($(this).scrollTop() > 100) {
           $('#scroll').fadeIn();
       } else {
           $('#scroll').fadeOut();
       }
   });
   $('#scroll').click(function(){
       $("html, body").animate({ scrollTop: 0 }, 600);
       return false;
   });
});
</script>
<style type="text/css">
/* BackToTop button css */
#scroll {
   position:fixed;
   right:35px;
   bottom:10px;
   cursor:pointer;
   width:50px;
   height:50px;
   background-color:#3498db;
   text-indent:-9999px;
   display:none;
   -webkit-border-radius:60px;
   -moz-border-radius:60px;
   border-radius:60px
}
#scroll span {
   position:absolute;
   top:50%;
   left:50%;
   margin-left:-8px;
   margin-top:-12px;
   height:0;
   width:0;
   border:8px solid transparent;
   border-bottom-color:#ffffff
}
#scroll:hover {
   background-color:#3ce747;
   opacity:1;filter:"alpha(opacity=100)";
   -ms-filter:"alpha(opacity=100)";
}
</style>

---

You can probably change a whole bunch of properties in that code, but I just changed the color (that's as far as my courage goes). You can see it in action here:
artandstitch.com/academy/teachers/

Hope this helps,

Loes

(thanks Frank!)

[prem]

Hi Loes,

Thanks for that and thanks to Frank as well. That looks just the ticket. I shall give that a try and hopefully I shall be able to modify some bits, although I am not au fait with JavaScript. Give me Pascal any day.

Thanks again,
Prem.

[prem]

Hi Loes,

I've been having a good play with yours and Frank back to top.

It works with no problem on a desktop monitor but I cannot get it to work on my Samsung mobile with my website. It works no problem with your website and a mobile, although you do need to scroll across to see the whole page.

Jason's back to top button works with my website on the mobile and a desktop monitor but because I have the menu buttons on two lines, Jason's button doesn't show until the bottom line is almost hidden.

I shall await until Jason has modified his back to top button.

I don't know enough about JavaScript to be able to modify Frank's back to top button otherwise it would do nicely.

Thanks again Loes
Prem.