Html 如何使图像成为'；跳转到'；按钮

在我的页面底部有一个“向上箭头”的小图标图像

如何使此图像成为可点击的按钮，并跳到页面顶部

我是新的HTML，这是我的第一个项目，所以请与我忍受

到目前为止，我已经尝试：

input type="button" id="btnx" style="background-image:url('arrowup.png')"

---

试试这个：用锚（标签）将你的图像包装起来，链接“#”将显示在顶部

<a href="#"><img src="/some-image-folder/arrowup.png"></a>

也许您的html是这样的：

<a href="#"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>

也许你想用输入按钮？好:

<form>
  <input type="button" value="Click me" onclick="$(window).scrollTop(0);">
</form>

---

如果你不想跳到顶端，这里有一个动画方法

使用图像设置动画：

函数topFunction（）{
if（document.body.scrollTop！==0 | | document.documentElement.scrollTop！==0）{
滚动窗口（0，-50）；
requestAnimationFrame（topFunction）；
}
}

.test{
背景颜色：浅灰色；
填充：30px；
高度：2500px；
边缘底部：10px；
}

滚动到底部

检查此项

HTML

<h1>Top of the page</h1>

    <article style="height: 1000px">
        <p style="margin-bottom: 600px">Scroll down the page&hellip;</p>
        <p>Then click the box.</p>
        <a href="#" class="scrollup">Scroll</a>
    </article>

$(document).ready(function () {

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('.scrollup').fadeIn();
    } else {
        $('.scrollup').fadeOut();
    }
});

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