Scroll to Anchor With JavaScript
Give your site visitors the ability to rest their scrolling fingers by adding scroll to anchor functionality to your website. Internet users click anchors daily in order to jump to different websites. By adding a few lines of JavaScript to your HTML code, you can make anchors jump to different locations within a single Web page.
Other People Are Reading
-
HTML Anchors
-
Web developers add links to Web pages using anchors. An anchor is a simple text string surrounding by an opening tag, "<a>," and a closing tag, "</a>." The opening tag contains the URL that site visitors will visit when they click the URL. The text that appears between the opening and closing tags creates the link text that users see in their browsers. You can also place the name of a JavaScript function inside the opening tag instead of putting a URL there. When someone clicks the link text, the function will run and cause some action to occur.
Named Anchors
-
Suppose you wanted to give users the ability to click a link at the top of the page and jump to the bottom of the page automatically. Named anchors give you that capability. A named anchor is a regular anchor that contains a name attribute as shown below:
<a name="downloads">This is the download section</a>
This code creates an anchor whose name is "downloads." Its text reads, "Jump to Download Section." The code below creates a link that jumps to the downloads anchor when clicked:
<a href="#downloads">Jump to Download Section</a>
Notice that it takes two anchors to make this scroll to anchor functionality possible: the destination anchor and the anchor that creates the link that takes you to the destination. The first anchor in this example is the destination anchor. The second anchor creates the link.
-
Scrolling to Anchor Using JavaScript
-
While users have the ability to click links manually and scroll to new page locations, you can perform this task for them using JavaScript. Instead of setting a link’s href attribute to the name of an anchor tag, set it to the name of a JavaScript function. That function can then use window.location.hash to jump to the named anchor. The following example jumps to the “downloads” anchor mentioned previously:
window.location.hash = “#downloads”;
Call a JavaScript function containing this statement anytime you need to scroll the browser to a new anchor location.
Other Uses
-
Web surfers love to bookmark pages. By adding named anchors to one of your Web pages, you can give users the ability to create several bookmarks from a single page. This is possible because a browser's address bar contains the name of your anchor along with the Web page's regular domain name. If your page contains five named anchors, site visitors can bookmark all five anchor locations and visit them any time they like by clicking one of their bookmarks. Users can save time by jumping directly to their favorite parts of your website without having to search your page once they arrive at your site.
-
