如何使用JavaScript回到网站的底部像回到顶部？

Question

I include coding on my blog for Back to top using HTML, CSS & JavaScript combination. Now I want to include which may work as opposition of Back to top that means Go to Bottom . For back to top I include code like this:

HTML

<div id="back-top">
<a href="#top">
<img src="http://4.bp.blogspot.com/-6KDdSchHT18/Uvxj4CJipXI/AAAAAAAAE4k/wyk-sSq5gbc/s1600/Back-to-top.png"/><br/>Top</a></div>

CSS

#back-top a{text-decoration: none;}
#back-top {
color: #ff0000;
position: fixed;
bottom: 25px;
left: 125px;
font-weight: bold;
}

JavaScript

$(function (){ 
$(window).scroll(function (){
if ($(this).scrollTop() > 300){
$('#back-top').fadeIn();
} 
else{
$('#back-top').fadeOut();
}
});

How can alternate this?

Answer 1

A very simple trick is to include at the very bottom of your page a div like so:

<div id="bottom"></div>

Then link to it with

<a href="#bottom">Go To Bottom</a>

Answer 2

To smoothly scroll to the body's end you can use this:

DEMO

$(function (){ 
    var bodyHeight = $('body').height();

    $('#back-bottom a').on('click', function(){
        $('html, body').animate({scrollTop: bodyHeight}, 300);
    });
});

Answer 3

<span id="here">&nbsp;</span>

<div id="back-bottom">
<a href="#here">
<img src="http://4.bp.blogspot.com/-6KDdSchHT18/Uvxj4CJipXI/AAAAAAAAE4k/wyk-sSq5gbc/s1600/Back-to-top.png"/><br/>Bottom</a></div>

Try the above!