Как перейти на нижнюю часть веб-сайта, как вернуться наверх, используя JavaScript?

Question

Как перейти на нижнюю часть веб-сайта, как вернуться наверх, используя JavaScript?

0

Я включаю кодирование в свой блог для Back to top, используя комбинацию HTML, CSS и JavaScript. Теперь я хочу включить, что может работать как оппозиция " Вверх", что означает " Вниз". Для начала я включаю такой код:

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();
}
});

Как это изменить?

dizaraj 17 фев. 2014, в 10:19

Источник

Теги:

javascript

jquery

html

css

3 ответа

1

Очень простой трюк заключается в том, чтобы включить в самом низу вашей страницы div например:

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

Затем соедините с ним

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

Elad Stern 17 фев. 2014, в 07:09

0

<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>

Попробуйте выше!

user3218006 17 фев. 2014, в 06:40

Ещё вопросы

enyce12 · Accepted Answer · 2014-02-17T06-41-00.000Z

Чтобы плавно прокрутить до конца тела, вы можете использовать это:

DEMO

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

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

Большое спасибо. Он работает с JQuery версии 1.9.1, и я включаю его в свой блог tutxt.blogspot.com