Question

我的页面底部有一个'Arrow Up'的小图标图片。

如何将此图片设为跳转到页面顶部的可点击按钮？

我是HTML新手，这是我的第一个项目，所以请耐心等待。

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

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

Answer 1

试试这个：将图片包裹在一个锚点（标签）链接中＃34;＃＆＃34;将进入顶部

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

Answer 2

如果你不想跳到顶部这里是一个动画方法。

使用图片动画：

＆＃13;

.test {
  background-color: lightgrey;
  padding: 30px;
  height: 2500px;
  margin-bottom: 10px;
}

＆＃13;

<div class="test">Scroll to Bottom</div>
<a href="javascript:void(0)" onclick="topFunction();" id="btnx"><img alt="Click" src="/images/arrowup.png"></a>

＆＃13;

function topFunction() {
  if (document.body.scrollTop !== 0 || document.documentElement.scrollTop !== 0) {
    window.scrollBy(0, -50);
    requestAnimationFrame(topFunction);
  }
}

＆＃13;

使用符号进行动画处理：

＆＃13;

.test {
  background: lightgrey;
  padding: 30px;
  height: 2500px;
  margin-bottom: 10px;
}

.uparrow {
  color: white;
  background: black;
  font-size: 22px;
  padding: 5px;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="test">Scroll to Bottom</div>
<a href="javascript:void(0)" onclick="topFunction();" id="btnx"><i class="material-icons uparrow">&#xE316;</i></a>

＆＃13;

gem 'recommendable', path: "/home/aristizabal95/forked_gems/recommendable"

＆＃13;

Answer 3

选中此FIDDLE

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

如何使图像成为“跳转到”按钮？

3 个答案: