如何创建一个返回页面顶部的按钮？答案

【问题标题】：How to create a button to go back to the top of the page?如何创建一个返回页面顶部的按钮？
【发布时间】：2019-03-28 22:50:06
【问题描述】：

我创建了一个带有返回页面顶部链接的按钮。

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

如何创建返回页面顶部的按钮？

【问题讨论】：

使用button 执行此操作的代码与使用a 的代码相同，因此您的代码已经有效：jsfiddle.net/k8qyLbgt。如果它对您不起作用，请首先检查控制台是否有错误，然后使用重现问题的代码更新问题
相同id的链接是否恰好在同一页面上，在按钮上方？

标签： javascript jquery css button scroll

【解决方案1】：

两者的代码相同。但是请注意，如果您没有删除标签，那么您可能会出现重复的 id 并且按钮将不起作用

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

【讨论】：

Kovchuck 谢谢，但您只需要一个按钮。出于我的主题的目的，我想将“a”替换为“button”。如果我这样做，备份将不再起作用。
我只更新了一个按钮的答案，如您所见，它仍然有效，所以请与您的代码进行比较，也许您只是有一些拼写错误

【解决方案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>

【讨论】：