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

#javascript #jquery #css #button #scroll

#javascript #jquery #css #кнопка #прокрутка

Вопрос:

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

Вот 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>

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

1. Код для выполнения этого с помощью a button идентичен коду для an a , поэтому ваш код уже работает: jsfiddle.net/k8qyLbgt . Если у вас это не работает, сначала проверьте консоль на наличие ошибок, а затем обновите вопрос кодом, который воспроизводит проблему

2. случайно ли ссылка с таким же идентификатором находится на той же странице, над кнопкой?

Ответ №1:

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

 (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. Kovchuck Спасибо, но вам нужна только одна кнопка. Для целей моей темы я хочу заменить «a» на «button». Если я это сделаю, резервное копирование больше не будет работать.

2. Я обновил ответ только на одну кнопку, как вы видите, она все еще работает, поэтому, пожалуйста, сравните с вашим кодом, возможно, у вас просто какая-то ошибка с опечаткой

Ответ №2:

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>