Redirect to specific part of a page with HTML Hyperlink

Last Reply 8 months ago By pandeyism

Posted 8 months ago

hello,

i have seen some site use page anchor to refer area of page like

page 1. hyperlink to navigate page 2 when user navigate to page 2 there are lots of content but user directly go to some specifc part of the page through anchor tag

 

how to achieve that

 

please advice

Posted 8 months ago

Hi nauna,

Please refer below sample.

HTML

HTMLPage.html

<html lang="en">
<head>
    <title></title>
</head>
<body>
    <ul>
        <li><a class="tocxref" href="HTMLPage1.htm#3">Links 1</a></li>
        <li><a class="tocxref" href="HTMLPage2.htm#4">Links 2</a></li>
        <li><a class="tocxref" href="HTMLPage3.htm#1">Links 3</a></li>
        <li><a class="tocxref" href="HTMLPage4.htm#2">Links 4</a></li>
    </ul>
</body>
</html>

HTMLPage1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="#1">
        Test 1
        <br />
        <img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#2">
        Test 2
        <br />
        <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#3">
        Test 3
        <br />
        <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#4">
        Test 4
        <br />
        <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" height="400px"
            alt="" />
    </div>
</body>
</html>

HTMLPage2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="#1">
        Test 1
        <br />
        <img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#2">
        Test 2
        <br />
        <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#3">
        Test 3
        <br />
        <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#4">
        Test 4
        <br />
        <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" height="400px"
            alt="" />
    </div>
</body>
</html>

HTMLPage3.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="#1">
        Test 1
        <br />
        <img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#2">
        Test 2
        <br />
        <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#3">
        Test 3
        <br />
        <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#4">
        Test 4
        <br />
        <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" height="400px"
            alt="" />
    </div>
</body>
</html>

HTMLPage4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="#1">
        Test 1
        <br />
        <img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#2">
        Test 2
        <br />
        <img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#3">
        Test 3
        <br />
        <img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" height="400px"
            alt="" />
    </div>
    <div id="#4">
        Test 4
        <br />
        <img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" height="400px"
            alt="" />
    </div>
</body>
</html>

Screenshot