Home >Web Front-end >JS Tutorial >How to Scroll to Specific Anchors on a Web Page using JavaScript?

How to Scroll to Specific Anchors on a Web Page using JavaScript?

Mary-Kate OlsenOriginal: 2024-11-17 18:39:02437browse

Navigating Web Pages to Specific Anchors using JavaScript

Navigating a web page to a specific anchor can be achieved with JavaScript by utilizing the location.hash property. Anchors are specified in HTML using the name or id attributes.

Code:

The following JavaScript code provides a simple solution to scroll the page to a given anchor:

function scrollTo(hash) {
    location.hash = "#" + hash;
}

Usage:

This function takes a single parameter, hash, which corresponds to the name or id of the anchor. Calling scrollTo('anchorName') will scroll the page to the element with the specified anchorName.

Example:

In the following HTML structure:

<html>
<body>
    <a name="section1">...</a>
    <a name="section2">...</a>
</body>
</html>

Calling scrollTo('section2') would smoothly scroll the page to the section with the section2 anchor. This mimics the effect of directly accessing the URL http://server.com/path#section2, ensuring the anchor is visible near the top of the page.

Note:

This method does not require jQuery or any additional libraries and works effectively on various browsers.

The above is the detailed content of How to Scroll to Specific Anchors on a Web Page using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery html require using Property function this location http

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How Can I Repeat a String Multiple Times in JavaScript?Next article：How Can I Repeat a String Multiple Times in JavaScript?

See more

How to Scroll to Specific Anchors on a Web Page using JavaScript?

Related articles