如何仅使用 CSS 和 HTML 制作返回顶部按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32102747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a back-to-top button using CSS and HTML only?
提问by Bic Mitchun
What i'm trying to do is kind of like a back to topbutton but to scroll down and up to a certain point on the page! Say for instance you have a long text and you want to bring the user to the next paragraph by simply having him to click on a link... I've done it in the past but I can't remember how I did it for the life of me...
我想要做的有点像一个back to top按钮，但要向下和向上滚动到页面上的某个点！比如说你有一个很长的文本，你想通过简单地让他点击一个链接来把用户带到下一段……我过去做过，但我不记得我是怎么做的我的生活……
回答by markasoftware
What you would want to do is put an "anchor" at the top of the page, using an <a>tag (it's not JUST useful for links!). Then, when you have a link that goes to #nameofanchor, it scrolls to the anchor with that name. You'd do it like this:
您想要做的是使用<a>标签在页面顶部放置一个“锚点” （它不仅对链接有用！）。然后，当您有指向 的链接时#nameofanchor，它会滚动到具有该名称的锚点。你会这样做：
<a name="top"></a>
<!--content here-->
<a href="#top">Back to top</a>
Here is a working jsfiddle: http://jsfiddle.net/qf0m9arp/1/
这是一个有效的 jsfiddle：http: //jsfiddle.net/qf0m9arp/1/
回答by user2867288
Utilize the <a>tag.
使用<a>标签。
At the top of your website, put an anchor with specified name.
在您网站的顶部，放置一个具有指定名称的锚点。
<a name="top"></a>
Then your "back to top" link points to it.
然后您的“返回顶部”链接指向它。
<a href="#top">back to top</a>
回答by mrlemmer11
This is the HTML only way:
这是 HTML 唯一的方式：
<body>
<a name="top"></a>
foo content
foo bottom of page
<a href="#top">Back to Top</a>
</body>
There are quite a few other alternatives using jquery and jscript though which offer additional effects. It really just depends on what you are looking for.
还有很多其他使用 jquery 和 jscript 的替代方案，尽管它们提供了额外的效果。这真的只取决于你在寻找什么。
回答by JakeFromSF
If you want a simple "Top" button that floats as you scroll down the page you can do this:
如果您想要一个在向下滚动页面时浮动的简单“顶部”按钮，您可以这样做：
HTML:
HTML：
<button id="myBtn"><a href="#top" style="color: white">Top</a></button>
CSS:
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>回答by Araldy
<a id="topbutton" href="#top">first page </a>
Basically what you have to do is replace the " #top" with the id of the first section or your page, or it could be the nav... Any id locate in the first part of the page and then try to set some style with css!
基本上你需要做的是用第一部分或你的页面的id替换“#top”，或者它可能是导航......任何id位于页面的第一部分，然后尝试设置一些样式用CSS！
回答by parag patel
I did my back-to-top button like this
我做了这样的返回顶部按钮
<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>
回答by sdconrox
I used a form with a single submit button. Point the "action" attribute to the ID of the element that needs to be navigated to. Worked for me with just "#top" without needing to define an ID in my stylesheet:
我使用了一个带有单个提交按钮的表单。将“action”属性指向需要导航到的元素的 ID。只用“#top”为我工作，无需在我的样式表中定义 ID：
<form action="#top">
<button type="submit">Back to Top</button>
</form>
Maybe a couple extra lines than is desirable but it's a button, at least. I find this the most concise and descriptive way to go about it.
也许比理想的多几行，但至少它是一个按钮。我发现这是最简洁和描述性的方法。
回答by spacer GIF
To add to the existing answers, you can avoid affecting the URL by overriding the link with JavaScript. This will still take you to the top of the page without JavaScript, but will append #to the URL.
要添加到现有答案中，您可以通过使用 JavaScript 覆盖链接来避免影响 URL。这仍会将您带到没有 JavaScript 的页面顶部，但会附加#到 URL。
<a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()">Back to top</a>
回答by zcd
Hope this helps somebody!
希望这对某人有帮助！
<style> html { scroll-behavior: smooth;} </style>
<a id="top"></>
<!--content here-->
<a href="#top">Back to top..</a>
回答by Bill D
This is my solution, HTML & CSS only for a back to top button, also my first post.
这是我的解决方案，HTML 和 CSS 仅用于返回顶部按钮，也是我的第一篇文章。
Fixed header of two lines at top of page, when scrolled 2nd line (with links) moves to top and is fixed. Links are Home, another page, Back, Top
固定页面顶部两行的标题，滚动时第二行（带链接）移动到顶部并固定。链接是主页，另一页，返回，顶部
<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>
