Sun Dial Menu

A Sticky Go to top of page button

As an enhancement to the design template and continuing with my research of CSS Position(ing) I thought I would try to implement a "Sticky" button that would serve the same function on the original template.

Having observed that my original page on CSS Position did not work after conversion to the new template. I found that there was a conflict with the W3.css Framework. The fix for this is detailed on the CSS Position page.

What I am trying here is to prototype the button and to see how it "fits" with the overall design before I add it to too many pages. So far it looks good on the Derivation of the Village of Belchamp Walter's name page.

The code for the "Sticky" button is added with its styling where it is required to appear first on the page:

Go to top of page

The Style for the Sticky Button

div.sticky {
z-index: 0;
position: -webkit-sticky;
position: sticky;
top: 50px;
padding: 5px;
width: 200px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
text-align: center;
cursor: pointer;

The html for the Sticky Button

<div class="sticky w3-hide-small w3-hover-grey" onclick="gototop()">Go to top of page</div>
<div class="sticky w3-hide-large w3-hover-grey" onclick="w3_open()">Menu</div>

Possible future enhancements

The button could be hidden unless the screen has be scrolled or contains few lines and therefore cannot be scrolled. Or at least such that the button would have scrolled out of view.

I see that I also have a previous page that attempted to put a Sticky Social Media banner on the page. However, I think that this may be dead in the water.

Things to work out

Looking at the CSS Position page the sticky button over-lays the relative and absolute divs.

Also the "Go to top" button scrolls off the top when scrolled to the very bottom. it doesn't on this new page. perhaps it is the fixed div???

Removing the last "Top" button seems to fix this even though there is still a fixed div.

Offset for on-page anchors

When using on-page links the offset needs to be increased to 80px for the destination div.

This is, of course, if the text would scroll off the screen in the first place.



Site design by Tempusfugit Web Design -