How to Make a Back-to-Top Button Using Css and Html Only?
I'm Trying to Do a Back to Top Button but to Scroll Down and up to a Certain Point on the Page. for Instance You Have a Long Text and You Want to Bring the...
I'm trying to do a back to top button but to scroll down and up to a certain point on the page. For instance you have a long text and you want to bring the user to the next paragraph by simply having them 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...
13 Answers
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 id="top"></a>
<!--content here-->
<a href="#top">Back to top</a>
Here is a working jsfiddle:
Utilize the <a> tag.
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>
This is the HTML only way:
<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.
<a href="#">Start of page</a>
"The link has the href value of "#", which by definition means the start of the current document. Thus there is no need to worry about the correct way of setting up the destination anchor..."
<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!
If you want a simple "Top" button that floats as you scroll down the page you can do this:
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>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:
<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.
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.
<a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()">Back to top</a>
Hope this helps somebody!
<style> html { scroll-behavior: smooth;} </style>
<a id="top"></>
<!--content here-->
<a href="#top">Back to top..</a>
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>
This is my solution, HTML & CSS only for a back to top button, also my first post.
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>
You can make back to top button using css and html using this syntax:
<a href="#idOfElement"> back to top</a>
for ex: id = heading
<a href="#heading">back to top</a>
when you click on back to top it scroll the screen at the heading id
*Tips:- please mention below code for smooth scrolling in css.
html{
scroll-behavior: smooth;
}
If you want to open a new link inside the iframe just add top element id of new page
Like #topPageElementId
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
