Как создать кнопку, чтобы вернуться в начало страницы? - PullRequest
Новая
       15

Как создать кнопку, чтобы вернуться в начало страницы?

0 голосов
/ 28 марта 2019

Я создал кнопку со ссылкой для возврата в начало страницы.

Вот код JS: 

(function ($) {

/*--Scroll Back to Top Button Show--*/

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

//Click event scroll to top button jquery

$('#back-to-top').click(function(){
    $('html, body').animate({scrollTop : 0},600);
    return false;
});

})(jQuery);

Вот HTML-код: 

<a id="back-to-top" href="#">
  <i class="fas fa-chevron-circle-up fa-4x"></i>
</a>

Работает очень хорошо, но я хочу создать кнопку вместо ссылки.

Я протестировал следующий HTML-код, но он не работает. Кнопка есть, но она не переходит обратно на страницу: 

<button type="button" id="back-to-top" href="#">
  <i class="fas fa-chevron-circle-up fa-4x"></i>
</button>

Как создать кнопку для возврата в начало страницы?

Ответы [ 2 ]

1 голос
/ 28 марта 2019

Это один и тот же код для обоих. Но обратите внимание, что если вы не удалили тег, может случиться так, что у вас есть дублирующийся идентификатор и кнопка не будет работать 

(function ($) {

/*--Scroll Back to Top Button Show--*/

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

//Click event scroll to top button jquery

$('#back-to-top').click(function(){

    $('html, body').animate({scrollTop : 0},600);
    return false;
});

})(jQuery);
body {
  min-height: 1000px;
}
button{
  position: fixed;
  right: 5px;
  bottom: 10px;
}
a{
  position: fixed;
  left: 5px;
  bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="back-to-top" type="button">
  Button
</button>
1 голос
/ 28 марта 2019

Javascript для перехода наверх страницы ... 

window.scrollTo(0,0)

Таким образом, если ссылка включена, она будет выглядеть следующим образом ... 

<a href="javascript:window.scrollTo(0,0);">Go to top</a>

Или как кнопка, это будет выглядеть так ... 

<button onclick="window.scrollTo(0,0);">Go to top</button>
...