In your HTML [hypertext markup language] code, between the opening and closing tags, add a new line where you want to place the link.
Add the top of page link using
top as the value of the href attribute, as shown below.
Back to top of page
For example, takes you back to the top of the page.
Tip
All modern browsers understand the "
top" value, meaning the id or anchor is unnecessary to return to the top. However, all other anchors need to be defined in the page.
Adding a sticky scroll-to-top button to your website adds further ease of navigation to your website by allowing a user to scroll to the top of any given web page with the click of a button.
Below is the HTML, CSS, and JavaScript required to add this functionality to your website.
Step 1
Add the HTML below to your web page
Toggle navigation
- Home
- About
- Contact
-
Dropdown
- Action
- Another action
- Something else here
- Nav header
- Separated link
- One more separated link
Main component for a primary marketing message or call to action >
Scroll Down
This example is a quick exercise to illustrate how a sticky scroll to top button works. It includes responsive CSS and HTML, so it also adapts to your viewport and device.
Step 2
Add the CSS below to the main stylesheet of your website
.scroll-top {
width: 75px;
height: 75px;
position: fixed;
bottom: 25px;
left: 20px;
display: none;
}
.scroll-top i { display: inline-block;
color:
# FFFFFF;
}
.navbar-brand>img {
padding-top: 11px;
width: 130px;
margin-left: 60px;
}
.navbar-brand { height: auto;
margin: 0;
padding: 0;
margin-right: 20px;
}
.navbar {
background-color: 000000;
} .navbar-default .navbar-nav > .active > a { padding: 8px 19px 9px !important; } .navbar-nav > li.active { padding: 8px 0px 9px 0; } .navbar-right { padding-top: 0; } .navbar-default .navbar-nav > li > a::after { background-color: transparent; border-bottom: 3px solid
d2282e;
} .navbar-default .navbar-nav>li { display: inline-block; text-align: center; float: none; } .navbar-default .navbar-nav>li>a {
color:
# fff;
}
.navbar-default .navbar-nav>li>a:hover { color:
# fff; background-color:
# 0392CC;
}Step 3
Add the code below to a file called scroll.js
$[document].ready[function [] {
$[window].scroll[function [] {
if [$[this].scrollTop[] > 100] {
$['.scroll-top'].fadeIn[];
} else {
$['.scroll-top'].fadeOut[];
}
}];$['.scroll-top'].click[function [] {
$["html, body"].animate[{
scrollTop: 0
}, 100];
return false;
}];}];
Step 4
Add the includes below to the pages where your button lives
Demo on JSFiddle
Download from GitHub
Originally Posted here on the Solodev Web Design Blog
To learn more about the power of the Solodev Web Design Platform visit solodev.com/features/!
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.
How do you make a back to top link in HTML?
How do you go back to the top of the page in HTML?
As defined in the HTML specification, you can use href="
top" or href="#" to link to the top of the current page. Yes, it is easy to scroll to the top by using the html's tag.
Where do you put the back to top button?
A common UI pattern is to place this button in the lower right-hand corner of the screen, making it “sticky” via a fixed position so it's always accessible as the user scrolls down the page.
How do I add a back to top button on Wix?
To create a "Back to Top" button:.
Click Add Elements on the left side of the Editor..
Click Buttons..
Drag a button to the desired location on the page..
Click the Link icon ..
Select Top / bottom of page on the left..
Click Top, then click Done..