Question

我尝试做的有点像var worker = new Worker('aURL'); worker.onerror = function () { console.log( 'error' ); };按钮，但向下滚动到页面上的某个点！比如说你有一个很长的文字，你只想让他点击一个链接就可以把用户带到下一段...我过去做过但我不记得怎么做了我为我的生命做过......

Answer 1

你想要做的是在页面顶部放置一个“锚”，使用<a>标签（它对链接不是很有用！）。然后，当您有一个转到#nameofanchor的链接时，它会滚动到具有该名称的锚点。你这样做：

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

这是一个有效的jsfiddle：http://jsfiddle.net/qf0m9arp/1/

Answer 2

使用<a>标记。

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

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

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

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

Answer 3

这是HTML唯一的方式：

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

使用jquery和jscript还有很多其他选择，但它们提供了额外的效果。这实际上取决于你在寻找什么。

Answer 4

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

基本上你要做的就是更换 “#top”带有第一部分或你的页面的id，或者它可能是导航...任何id位于页面的第一部分，然后尝试用css设置一些样式！

Answer 5

如果您希望在向下滚动页面时浮动一个简单的“顶部”按钮，则可以执行以下操作：

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>

Answer 6

HTML

<a name="gettop"></a>

<button id="btn"><a href="#gettop">Back to Top</a></button>

CSS

#btn {  
    position: fixed;
    bottom: 10px;
    float: right;
    right: 20.5%;
    left: 77.25%;
    max-width: 90px;
    width: 100%;
    font-size: 12px;
    border-color: rgba(5, 82, 248);
    background-color: rgb(5, 82, 248);
    padding: .5px;
    border-radius: 4px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

关于悬停颜色更改

#btn:hover {
    background-color: #fafafa;
}

Answer 7

我做了像这样的回到顶部的按钮

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

Answer 8

我使用了带有单个提交按钮的表格。将“操作”属性指向需要导航到的元素的ID。只需在“ #top”中为我工作，而无需在样式表中定义ID：

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

也许多了几行，但至少是一个按钮。我发现这是最简洁，最具描述性的方式。

Answer 9

要添加到现有答案中，可以通过使用JavaScript覆盖链接来避免影响URL。仍然会带您到达没有JavaScript的页面顶部，但是会将#附加到URL。

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

Answer 10

希望这对某人有帮助！

--output

Answer 11

这是我的解决方案，HTML和CSS仅用于返回顶部的按钮，也是我的第一篇文章。

页面顶部固定的两行标题，当滚动的第二行（带有链接）移动到顶部并固定时。链接是首页，另一页，返回，顶部

 <h1 class="center italic fixedheader">
  Some Text <span class="small">- That describes your site or page</span>
  <br>
  <a href="index.htm">&#127968;&nbsp;Home</a> <a href=
  "gen.htm">&#128106;&nbsp;Gen</a> <a href="#"
      onclick="history.go(-1);return false;">&#128072;&nbsp;Back</a> <a href=
   enter code here   "#">&#128070;&nbsp;Top</a>
  </h1>

    <style>
    .fixedheader {
    margin: auto;
    overflow: hidden;
    background-color: inherit;
    position: sticky;
    top: -1.25em;
    width: 100%;
    border: .65em hidden inherit;
    /* white solid border hides any bleed through at top and lowers text */
    }
    </style>

Answer 12

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

“该链接的href值为“＃”，根据定义，它意味着当前文档的开始。因此，无需担心设置目标锚点的正确方法...”

Source

Answer 13

我们可以像这样将链接指向“#”。这样，除了“返回顶部”链接之外，我们无需添加空白锚点标签或更改任何内容。

<a href="#">Back To Top</a>

如何使用CSS和HTML制作一个回到顶部的按钮？

13 个答案: