Question

我想要一个按钮，当你点击它时，它会让你（访客）到达页面顶部。怎么办呢？
感谢

Answer 1

如果你有一个键盘：

按下'Home'按钮。

Answer 2

超链接的经典操作是指向与正在查看的页面不同的页面，以导航网站。也可以创建指向当前页面上特定位置的链接，或者创建到另一个页面的链接，以便正确定位浏览器。

创建一个锚很简单：你只需要分配你想要能够指向一个标识符的元素（具有属性HTML id），并将一个以字符＃开头的链接，然后是名称这个标识符。

Ex: 
<div id="top">...</div>

It is then enough to make a link to this anchor:
<a href="#top">top of page</a>

Demo:
<!DOCTYPE html>
<html>
    <head>
        <title>top link</title>
        <meta charset="UTF-8">
    </head>
    <body>

        <div id="top">...</div>

        <!-- Content -->
        <!-- Content -->
        <!-- Content -->

        <a href="#top">top of page</a>

    </body>
</html>

Answer 3

你可以这样做：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery Back To Top Button by CodexWorld</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">             </script>
  <script type='text/javascript'>
    $(document).ready(function(){ 
      $(window).scroll(function(){ 
       if ($(this).scrollTop() > 100) { 
        $('#scroll').fadeIn(); 
       } else { 
        $('#scroll').fadeOut(); 
      } 
     }); 
    $('#scroll').click(function(){ 
     $("html, body").animate({ scrollTop: 0 }, 600); 
     return false; 
    }); 
  });
  </script>
<style type="text/css">
/* BackToTop button css */
#scroll {
  position:fixed;
  right:10px;
  bottom:10px;
  cursor:pointer;
  width:50px;
  height:50px;
  background-color:#3498db;
  text-indent:-9999px;
  display:none;
  -webkit-border-radius:60px;
  -moz-border-radius:60px;
  border-radius:60px
  }
  #scroll span {
   position:absolute;
  top:50%;
  left:50%;
  margin-left:-8px;
  margin-top:-12px;
  height:0;
  width:0;
  border:8px solid transparent;
  border-bottom-color:#ffffff
 }
 #scroll:hover {
  background-color:#e74c3c;
  opacity:1;filter:"alpha(opacity=100)";
  -ms-filter:"alpha(opacity=100)";
 }
</style>
</head>

 <body>
   <!-- BackToTop Button -->
  <a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: inline;">Top<span></span></a>

     <!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->

    </body>
   </html>

Just Copy＆amp;粘贴脚本并运行

Answer 4

点击按钮，运行Javascript：

window.scrollTo(0, 0);

Answer 5

获取链接：

<a href="#">Back to top</a>

使用按钮：

<a href="#">
    <button>Back to top</button>
</a>

另见：

How to create an HTML button that acts like a link?

HTML Anchors with 'name' or 'id'?

如何在页面上更改访客位置

5 个答案: