【发布时间】：2022-03-17 12:31:12
【问题描述】：
我正在尝试使用back to top 按钮，但要向下和向上滚动到页面上的某个点。例如，你有一个长文本，你想通过简单地让用户点击一个链接来将用户带到下一段......我过去做过，但我不记得我是如何做到的我的生活......
【问题讨论】：
【发布时间】：2022-03-17 12:31:12
【问题描述】：
您想要做的是在页面顶部放置一个“锚点”，使用<a> 标记（它不仅仅对链接有用！）。然后，当您有一个指向#nameofanchor 的链接时，它会滚动到具有该名称的锚点。你会这样做：
<a id="top"></a>
<!--content here-->
<a href="#top">Back to top</a>
这是一个有效的 jsfiddle：http://jsfiddle.net/qf0m9arp/1/
【讨论】：
-
@user2864740 该死的，别再讲道理了！
-
请注意，在 HTML5 中，
<a>标记的name属性已被弃用，而应使用id属性来代替。 -
非常好和简单。相比之下，w3schools' approach 的复杂程度令人难以置信。
-
如果我在同一页面中有页脚作为文件，我们可以使用此方法，但如果我们有页脚和主页作为不同的页面，我们该怎么办
-
为什么不简单地将 id 放在已经存在的东西上？比如
<body id="top">？
使用<a> 标签。
在您的网站顶部，放置一个具有指定名称的锚点。
<a name="top"></a>
然后你的“回到顶部”链接指向它。
<a href="#top">back to top</a>
【讨论】：
这是 HTML 唯一的方法：
<body>
<a name="top"></a>
foo content
foo bottom of page
<a href="#top">Back to Top</a>
</body>
还有很多其他使用 jquery 和 jscript 的替代方案，尽管它们提供了额外的效果。这真的取决于你在寻找什么。
【讨论】：
-
自动关闭
<a>标签在 HTML5 中无效。
【讨论】：
<a id="topbutton" href="#top">first page </a>
基本上你要做的就是更换 “#top”与第一部分或您的页面的 id，或者它可能是导航...任何 id 位于页面的第一部分，然后尝试使用 css 设置一些样式！
【讨论】：
如果您想要一个在向下滚动页面时浮动的简单“顶部”按钮，您可以这样做：
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>【讨论】：
-
将
a标记放入button是无效的HTML。
我使用了一个带有单个提交按钮的表单。将“action”属性指向需要导航到的元素的 ID。仅使用“#top”为我工作，无需在我的样式表中定义 ID：
<form action="#top">
<button type="submit">Back to Top</button>
</form>
可能会多出几行，但至少它是一个按钮。我发现这是最简洁和描述性的方式。
【讨论】：
-
如果您没有 ID 为“top”的元素，则可以将其从表单操作中删除。只需使用#
要添加到现有答案，您可以通过使用 JavaScript 覆盖链接来避免影响 URL。在没有 JavaScript 的情况下，这仍会将您带到页面顶部，但会将 # 附加到 URL。
<a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()">Back to top</a>
【讨论】：
希望这对某人有所帮助！
<style> html { scroll-behavior: smooth;} </style>
<a id="top"></>
<!--content here-->
<a href="#top">Back to top..</a>
【讨论】：
我做了这样的返回顶部按钮
<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>
【讨论】：
这是我的解决方案，HTML 和 CSS 仅用于返回顶部按钮，也是我的第一篇文章。
固定页面顶部两行的标题，当滚动时第二行（带有链接）移动到顶部并固定。链接是主页、另一页、返回、顶部
<h1 class="center italic fixedheader">
Some Text <span class="small">- That describes your site or page</span>
<br>
<a href="index.htm">🏠 Home</a> <a href=
"gen.htm">👪 Gen</a> <a href="#"
onclick="history.go(-1);return false;">👈 Back</a> <a href=
enter code here "#">👆 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>
【讨论】：
您可以使用 css 和 html 使用以下语法制作 back to top 按钮：
<a href="#idOfElement"> back to top</a>
例如： id = 标题
<a href="#heading">back to top</a>
当你点击返回顶部时，它会在标题 id 处滚动屏幕
*提示：- 请提及以下代码以在 css 中平滑滚动。
html{
scroll-behavior: smooth;
}
【讨论】：
如果您想在 iframe 中打开新链接，只需添加新页面的顶部元素 id
点赞https://example.com/#topPageElementId
【讨论】：