Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Smooth scroll to top of page with CSS/HTML only?

Tags:

html

css

I am not permitted to add in Jquery/Javascript to this site, so I was looking for any way to do a "Back to Top" button, and have it transition to top with CSS/HTML only....don't think it's possible, but checking to see if anyone has come across a solution.

like image 611
user2250423 Avatar asked May 03 '13 23:05

user2250423


People also ask

How do I make my page scroll to the top in HTML?

window. scrollTo(0, 0); …is a sure bet to scroll the window (or any other element) back to the top.

How do you quickly scroll to the top of a page?

Scroll one page at a time in all major browsers including Microsoft Internet Explorer and Mozilla Firefox by pressing the Spacebar key. Move back up the page by pressing Shift + Spacebar or the Home key on the keyboard.

How do I get to the top of the page without scrolling?

Try using Command key + arrow up (or down). The reason those work is because adding the Fn key turns those keys into Home, End, Page Up, and Page Down. On extended keyboards, you can get to top of page by pressing just the Home key, and the bottom of a page by pressing End.

How do you navigate to another page with a smooth scroll on a specific ID?

Modern Browsers detect the hash in the url and then automatically open that part. So, if you want to scroll smoothly to that part instead, you first need to reset the scroll position to 0 and then add smooth scrolling. // direct browser to top right away if (window. location.


1 Answers

It wont be a smooth scroll but u can use an achor tag to link to any part of the page. Here is an example from W3 schools.

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

basically the href uses a css selector to decide which anchor to go to

UPDATE: So I found an interesting link on smooth scrolling thought I would post it on this question.

like image 118
aaronman Avatar answered Oct 13 '22 00:10

aaronman