使用CSS/HTML平滑滚动到页面顶部?

use*_*423 15 html css css3

我不允许在这个网站上添加Jquery/Javascript,所以我一直在寻找任何方法来做一个"返回顶部"按钮,并且只用CSS/HTML过渡到顶部....不要认为这是可能的,但检查是否有人遇到过解决方案.

aar*_*man 11

它不会是一个平滑的滚动,但你可以使用achor标签链接到页面的任何部分.这是W3学校的一个例子.

<!DOCTYPE html>
<html>
<body>

<h2><a id="top">There is a link at the bottom of the page!</a></h2>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>"Whenever you feel like criticizing any one," he told me, "just remember that all the people in this world haven't had the advantages that you've had."</p>
<p>He didn't say any more, but we've always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I'm inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought-frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon; for the intimate revelations of young men, or at least the terms in which they express them, are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat, a sense of the fundamental decencies is parcelled out unequally at birth.</p>
<p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes, but after a certain point I don't care what it's founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction-Gatsby, who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the "creative temperament"-it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No-Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and short-winded elations of men.</p>

<a href="#top">Go to top</a>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

基本上,href使用css选择器来决定要去哪个锚点

更新:所以我发现了一个关于平滑滚动的有趣链接,我想在这个问题上发布它.

  • 我同意这个解决方案,但请添加一些代码来解释.+1 (3认同)

Cod*_*ner 5

据我所知,没有办法只使用CSS进行平滑的页面转换.正如aaronman所说,您可以使用HTML属性id来帮助跳转到页面上的不同位置.你给元素id,可以是你想要的任何东西

<h1 id="whatever">Jump to me</div>
Run Code Online (Sandbox Code Playgroud)

然后在页面的某个位置,您可以使用锚标记来跳转到此.

<a href="#whatever">Jump to "Jump to me"</a>
Run Code Online (Sandbox Code Playgroud)

小提琴

这种方式的工作方式非常类似于CSS中的元素.你使用id来定位它,href它将带你到那里.这对于目录等项目很有帮助.如果您正在制作诸如目录之类的内容并且您希望显示已跳转到某个部分,则可以使用:target伪类来完成此操作.是一个非常基本的例子.

你可以这样做,而不必一个元素跳转到的方法是给a一个href#.这将直接跳到页面顶部.它几乎就像<html>页面中id的一样#.

小提琴