Redirect to specific part of a page with HTML Hyperlink

Last Reply 5 months ago By pandeyism

Posted 5 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

You are viewing reply posted by: pandeyism 5 months ago.
Posted 5 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