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...
<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..."
Hope this helps somebody!
<style> html { scroll-behavior: smooth;} </style>
<a id="top"></>
<!--content here-->
<a href="#top">Back to top..</a>
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*/_x000D_
#myBtn {_x000D_
position: fixed;_x000D_
bottom: 10px;_x000D_
float: right;_x000D_
right: 18.5%;_x000D_
left: 77.25%;_x000D_
max-width: 30px;_x000D_
width: 100%;_x000D_
font-size: 12px;_x000D_
border-color: rgba(85, 85, 85, 0.2);_x000D_
background-color: rgb(100,100,100);_x000D_
padding: .5px;_x000D_
border-radius: 4px;_x000D_
_x000D_
}_x000D_
/*On Hover Color Change*/_x000D_
#myBtn:hover {_x000D_
background-color: #7dbbf1;_x000D_
}_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<meta http-equiv="X-UA-Compatible" content="IE=edge">_x000D_
<meta name="viewport" content="width=device-width,initial-scale=1.0">_x000D_
<title> Simple Back To Top Floating Button </title>_x000D_
</head>_x000D_
<body style="background-color: rgba(84,160,245,0.51)">_x000D_
<div style="padding:15px 15px 2500px;font-size:30px">_x000D_
<p><b>Scroll down and click the button</b></p>_x000D_
<p>Scroll down this frame to see the effect!</p>_x000D_
<p>Scroll Baby SCROLL!!</p>_x000D_
<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>_x000D_
</div>_x000D_
_x000D_
_x000D_
<button id="myBtn"><a href="#top" style="color: white">Top</a></button>_x000D_
_x000D_
</body>_x000D_
</html>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>
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>
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>
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 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!
HTML
<a name="gettop"></a>
<button id="btn"><a href="#gettop">Back to Top</a></button>
CSS
#btn {
position: fixed;
bottom: 10px;
float: right;
right: 20.5%;
left: 77.25%;
max-width: 90px;
width: 100%;
font-size: 12px;
border-color: rgba(5, 82, 248);
background-color: rgb(5, 82, 248);
padding: .5px;
border-radius: 4px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
On Hover Color Change
#btn:hover {
background-color: #fafafa;
}
Source: Stackoverflow.com