Smooth Scrolling and Anchors

After gathering inspiration from other websites I found that every website with a similar scroll effect where the header and related elements are fixed and the content scrolls above it all have some sort of 'scroll hint'.

The previous blog post about the website bubblesfilm.com shows a scroll hint at the bottom of the page looking like this:

This animated on hover from one arrow to two and I thought it was a really neat feature, when clicked it just scrolls down the page to a fixed point where the content begins. So I thought to myself how could I get something similar? It would be a great way to prompt the user of the website to scroll down and make sure they don't get bored.

1. My first step was to think about the basics, it's an anchor from one spot on the page to another, and has a :hover state change to a different image with some added animation.

2. Next, I looked at http://www.w3schools.com/html/html_links.asp this gave me everything I needed to know about how to link to another point on the page.

It shows you that if you want to create a link, you must do <a href="#tips"> Link to </a> and then at the destination you set the 'other end' of the anchor with <a id=""#tips"> </a> this takes you to the area in the HTML page in which you put it, in my case where the content begins.

So initially I just positioned a div with a background of #FFF (white) about the size I wanted the button to be, in this case I made it 81px width and 41px height. I also gave it bottom: 0; this puts it at the bottom of its container and then position: fixed; and a left: 48% to center it in the middle of the page. This is what I had: 

So I then applied my newly created class to the anchor by using <a href="example" class="scrollhint"> </a> this then gave the anchor the styles that I gave the the class .scrollhint.

Once I'd done this I added a border radius of 81px to both the top-left and top-right of the div, making it rounded giving a semi-circle look: border-radius: 81px 81px 0 0;  Each number selects, top left, top right, bottom left, bottom right in left to right order. This allows you to just have one line of code for border-radius and not four for each corner. This is the result:

Now all I need to do is add my arrow, and I came to the conclusion that the easiest way to do this was to do a image inside the square, and then on :hover change to another image of an arrow lower down, with a fade transition to make it look animated.

Here is the first state of the arrow.



Here is the second state when hovered, with a fade transition in-between.


Here is the final stage, when the hover animation has completed from the first higher arrow to the second lower arrow.



Finally I had one last problem, when I scrolled down the page the fixed scroll-hint showed above all the other content on the page when I wanted it to go behind it. I gave it a z-index similar to my fixed header/title and content scrolling above. I gave it a lower z-index than the content divs and this did the job.
Here is the HTML anchors:

Here is the final CSS styling: