How to add and make a 'Go to bottom' button work on Blogger

Live-Demo of this button is at the top right corner of this blog.

Let's say you already have a 'Back to top' button and want to add a "Go to bottom" button as well. I just tried doing this and after many attempts I finally found a way to make it work. I cheated a bit but it works on Internet Explorer, Google Chrome (the button is a bit sticky in Google Chrome - you need to scroll down from the top of the page a tiny bit before the button works properly) and Firefox web browsers. It is a really simple solution too. Normally you are supposed to write #footer as the link url or #bottom but none of those commands work. Various other combinations also don't work. What did work was I made the link url go to the bottom most widget on my blog. I located the widget's ID added the standard # symbol before it and pasted them both into the link url section.

Here is the code for the go down to bottom button code:

<a href='#Attribution1' style='display:scroll;position:fixed;top:4px;right:2px;'><img alt='Scroll to Bottom' height='31px' src='https://lh6.googleusercontent.com/-YHprowZgco4/T02ddR_PNeI/AAAAAAAAF7U/q3eCtClIbDM/s16/button_down16.gif' width='31px'/></a>

The red text in the code above is what you need to change and the only thing you need to change in the code. All that you do is scroll down and locate the bottom most part code for your footer.
For example:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>    
</div>  
</div>    
<div class='footer-cap-bottom cap-bottom'>      
<div class='cap-left'/>      
<div class='cap-right'/>    
</div>    
</div>    
</footer>

Do NOT copy the footer code displayed above this text. You are ONLY supposed to be locating it in your own template. In the above footer code the widget's ID is in blue. That is the widget ID code you need to look for, with whatever widget is at the very bottom of your footer. It is the same code you need to copy and paste into the link url section.

Where to put the code in your template.
When you copy the top lot of code above go to your edit template page. Do NOT tick the expand box. Scroll all the way down to the bottom of the template and you should see:

</body>
</html>

If you don't see the </body> at the very bottom don't panic. Paste the code directly before the </html> tag.

In other words, the code needs to go AFTER the </body> tag and DIRECTLY BEFORE the </html> tag. Every template is different so you need to find at least one of those closing tags at the bottom of your template. Paste the code into your template then click on "Save template".

That's it. Feel free to use the above code on your own blog.
I've hosted both the button images on my Picasa Web Album so you don't have to host it if you don't want to.

There is a matching "back to top" button if interested. The code for it is below.

<a href='#' style='display:scroll;position:fixed;bottom:4px;right:2px;'><img alt='Back To Top' height='31px' src='https://lh5.googleusercontent.com/-ElIXNOC9gts/T02dmS6KF1I/AAAAAAAAF7U/x6C60GloRm4/s16/button_up16.gif' width='31px'/></a>

REMEMBER: IF YOU FORGET TO ADD THE # SYMBOL BEFORE THE WIDGET'S ID AS THE URL, THE GO TO BOTTOM BUTTON WILL NOT WORK.