如何只使用CSS和HTML创建回到顶部按钮？

Question

如何只使用CSS和HTML创建回到顶部按钮？

htmlcss

32

我正在尝试制作一个“返回顶部”按钮，但是要将页面向上或向下滚动到某个特定点。例如，您有一长段文字，希望用户通过单击链接将其带到下一段落...我以前做过这样的事，但现在我却想不起来我是怎么做的了...

- Bic Mitchun

13个回答

9

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

链接的href值为“＃”，这意味着它指向当前文档的开头。因此，无需担心设置目标锚点的正确方法... 来源

- Jussi Palo

5

请使用<a>标签。

在您的网站顶部，放置一个指定名称的锚点。

<a name="top"></a>

然后你的“返回顶部”链接指向它。

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

- user2867288

5

这是仅使用HTML的方法：

<body>
<a name="top"></a>
foo content
foo bottom of page
<a href="#top">Back to Top</a>
</body>

还有很多使用jQuery和JavaScript的其他选择，它们提供了额外的效果。这只取决于你想要什么。

- mrlemmer11

3

在HTML5中，自闭合<a>标签是无效的。 - user2867288

3

<a id="topbutton" href="#top">first page </a>

基本上你需要做的是将 " #top" 替换为你页面中第一个部分或导航栏的id，然后使用CSS设置样式。

- Araldy

1

如果您想要一个简单的“返回顶部”按钮，在页面滚动时浮动，您可以这样做：

HTML：

<button id="myBtn"><a href="#top" style="color: white">Top</a></button>

CSS：

/*Floating Back-To-Top Button*/
    #myBtn {
        position: fixed;
        bottom: 10px;
        float: right;
        right: 18.5%;
        left: 77.25%;
        max-width: 30px;
        width: 100%;
        font-size: 12px;
        border-color: rgba(85, 85, 85, 0.2);
        background-color: rgb(100,100,100);
        padding: .5px;
        border-radius: 4px;

    }
/*On Hover Color Change*/
    #myBtn:hover {
        background-color: #7dbbf1;
    }

<html>
<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title> Simple Back To Top Floating Button </title>
</head>
<body style="background-color: rgba(84,160,245,0.51)">
<div style="padding:15px 15px 2500px;font-size:30px">
  <p><b>Scroll down and click the button</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll Baby SCROLL!!</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


<button id="myBtn"><a href="#top" style="color: white">Top</a></button>

</body>
</html>

- JakeFromSF

2

将a标签放入button中不是有效的HTML。 - jnv

0

补充现有答案，您可以通过JavaScript覆盖链接来避免影响URL。这仍然会在没有JavaScript的情况下将您带到页面顶部，但会在URL后附加#。

<a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()">Back to top</a>

- spacer GIF

0

希望这对某人有所帮助！

<style> html { scroll-behavior: smooth;} </style>
<a id="top"></>
<!--content here-->
<a href="#top">Back to top..</a>

- zcd

0

我使用了一个只有一个提交按钮的表单。将“action”属性指向需要导航到的元素的ID。对我来说，只需使用“#top”，而无需在样式表中定义ID即可正常工作：

<form action="#top">
    <button type="submit">Back to Top</button>
</form>

可能多了几行不太希望的代码，但这是一个按钮，至少如此。我认为这是最简洁和描述清晰的方式。

- sdconrox

1

如果您的表单中没有ID为“top”的元素，则可以从表单操作中将其删除。只需使用#即可。 - johny why

-1

我是这样做我的返回顶部按钮的

<li class="nav-item"><a class="nav-link active" href="#home">HOME</a></li>   
    <button type="button" class= "btn btn-light" name="button" style="float: right;"><a href="#top">Top</a></button>

- parag patel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markasoftware · Accepted Answer

您需要做的是在页面顶部使用一个 <a> 标签放置一个“锚点”（它不仅仅用于链接！）。然后，当您有一个链接跳转到 #nameofanchor 时，它会滚动到具有该名称的锚点处。您可以像这样完成：

<a id="top"></a>
<!--content here-->
<a href="#top">Back to top</a>

这里有一个工作的jsfiddle: http://jsfiddle.net/qf0m9arp/1/