How to create a 'back to top' button with HTML and JavaScript?
To add the "Back to Top" button, first create the button element in HTML and set the id, such as <button id="backToTopBtn">↑ Back to top</button>; then set the fixed positioning, lower right corner position and hide the default display through CSS, and add styles such as background color, rounded corners and shadows; then listen to scroll events in JavaScript, and display the button when the scroll distance exceeds the set value (such as 300 pixels), otherwise hide it; finally bind the click event for the button, and use window.scrollTo({ top: 0, behavior: 'smooth' }) to achieve a smooth return to the top effect.
It is actually not difficult to add a "Back to Top" button, it can be done with HTML and JavaScript. The key point is how to make it appear at the right time, and the page can be smoothly rolled back to the top after clicking.
1. Add the HTML structure of the button
First you have to put a button element on the page. Usually, the This button is hidden by default and will be displayed after the user scrolls for a certain distance. In order for the button to look like the common "back to top", you need to add some basic styles to it, such as fixed positioning, lower right corner display, rounded corners, shadows, etc. This way the button will always appear in the lower right corner and will not disappear with scrolling. Next is the JavaScript part. We need to listen to the user's scrolling action, and display the button when the scrolling exceeds a certain distance (such as 300 pixels); otherwise it is hidden. Here, The last step is to make the button have actual functions: the page will automatically roll back to the top after clicking. You can use the This way, when the user clicks the button, the page will not jump hard, but will return to the top smoothly. Basically these steps. The operation is not complicated, but some details need to be paid attention to, such as the position of the button, triggering timing and scrolling behavior. A little adjustment can be adapted to various web styles.<button></button> tag is used, or <a></a> or <button></button> with clearer semantics. 
<button id="backToTopBtn">↑ Back to top</button>
2. Use CSS to control button style and position
#backToTopBtn {
position: fixed;
bottom: 30px;
right: 30px;
display: none; /* hide by default*/
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 9999;
} 3. Listen to scroll event control buttons to display and hide
window.addEventListener('scroll', function () {
const btn = document.getElementById('backToTopBtn');
if (window.scrollY > 300) {
btn.style.display = 'block';
} else {
btn.style.display = 'none';
}
});window.scrollY is used to determine how many pixels are currently scrolling. You can adjust the value of 300 as needed. 4. Click the button to achieve smooth scrolling back to the top
window.scrollTo() method of JavaScript, and the animation effect will be more friendly. document.getElementById('backToTopBtn').addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
To summarize:
scrollTo to achieve smooth scrolling when clicking a button
The above is the detailed content of How to create a 'back to top' button with HTML and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
The `` vs. `` in HTML
Jul 19, 2025 am 12:41 AM
It is a block-level element, used to divide large block content areas; it is an inline element, suitable for wrapping small segments of text or content fragments. The specific differences are as follows: 1. Exclusively occupy a row, width and height, inner and outer margins can be set, which are often used in layout structures such as headers, sidebars, etc.; 2. Do not wrap lines, only occupy the content width, and are used for local style control such as discoloration, bolding, etc.; 3. In terms of usage scenarios, it is suitable for the layout and structure organization of the overall area, and is used for small-scale style adjustments that do not affect the overall layout; 4. When nesting, it can contain any elements, and block-level elements should not be nested inside.
Essential HTML Tags for Beginners
Jul 27, 2025 am 03:45 AM
To get started with HTML quickly, you only need to master a few basic tags to build a web skeleton. 1. The page structure is essential, and, which is the root element, contains meta information, and is the content display area. 2. Use the title. The higher the level, the smaller the number. Use tags to segment the text to avoid skipping the level. 3. The link uses tags and matches the href attributes, and the image uses tags and contains src and alt attributes. 4. The list is divided into unordered lists and ordered lists. Each entry is represented and must be nested in the list. 5. Beginners don’t have to force memorize all tags. It is more efficient to write and check them while you are writing. Master the structure, text, links, pictures and lists to create basic web pages.
How to add an image in HTML?
Jul 15, 2025 am 03:03 AM
The key to adding images in HTML is to use the img tag and set the properties correctly. First, you must use the tag and set the src attribute to specify the image path. Secondly, it is recommended to add the alt attribute to provide alternative text; the path can be a relative path or an absolute path, and you need to pay attention to case, format support and server configuration; in addition, the picture style can be controlled through CSS to enhance responsiveness and aesthetics.
Preloading Resources with HTML `link rel='preload'`
Jul 19, 2025 am 12:54 AM
linkrel="preload" is a technology that optimizes page loading performance and is used to load critical resources in advance. Its core purpose is to prioritize loading of resources that are critical to home screen rendering, such as fonts, key CSS/JS and home screen images. Pay attention to when using: 1. Set the as attribute correctly to specify the resource type; 2. Avoid abuse and prevent excessive bandwidth usage; 3. Ensure that the resources will be actually used, otherwise it will cause waste of requests; 4. Add crossorigin attribute to cross-domain resources. Incorrect writing method such as the lack of the as attribute will cause the preload to be invalid. Rational use can improve page loading efficiency, otherwise it may be counterproductive.
What are the different types of lists available in html and their usage?
Jul 15, 2025 am 02:59 AM
HTML provides three list types to structure content. 1. Unordered list () is used for entries that require no order, such as function list or ingredients; 2. Ordered list () is used for sequential content, such as step description, and supports multiple numbering formats; 3. Description list (,,) is used to pair terms and descriptions, such as dictionaries or product specifications; in addition, it also supports nested lists, which can add sublists under the main entry to organize complex information, thereby improving page readability and accessibility.
Shadow DOM Concepts and HTML Integration
Jul 24, 2025 am 01:39 AM
ShadowDOM is a technology used in web component technology to create isolated DOM subtrees. 1. It allows the mount of an independent DOM structure on ordinary HTML elements, with its own styles and behaviors, and does not affect the main document; 2. Created through JavaScript, such as using the attachShadow method and setting the mode to open; 3. When used in combination with HTML, it has three major features: clear structure, style isolation and content projection (slot); 4. Notes include complex debugging, style scope control, performance overhead and framework compatibility issues. In short, ShadowDOM provides native encapsulation capabilities for building reusable and non-polluting UI components.
Can you put a tag inside another tag?
Jul 27, 2025 am 04:15 AM
❌Youcannotnesttagsinsideanothertagbecauseit’sinvalidHTML;browsersautomaticallyclosethefirstbeforeopeningthenext,resultinginseparateparagraphs.✅Instead,useinlineelementslike,,orforstylingwithinaparagraph,orblockcontainerslikeortogroupmultipleparagraph
HTML `style` Tag: Inline vs. Internal CSS
Jul 26, 2025 am 07:23 AM
The style placement method needs to be selected according to the scene. 1. Inline is suitable for temporary modification of single elements or dynamic JS control, such as the button color changes with operation; 2. Internal CSS is suitable for projects with few pages and simple structure, which is convenient for centralized management of styles, such as basic style settings of login pages; 3. Priority is given to reuse, maintenance and performance, and it is better to split external link CSS files for large projects.
