jump link to a section on another page

Report · Sep 11, 2021

I don't see where the issue is but the jump link to a section on another page fails. It goes to the page, just not to the correct ID. I tried the old school <a name="anchor name"></a> but isn't helping.

Here are the two pages:

Source page: https://documeantpublishing.com/authors.html

<a href="fullbios.html#a1" class="link_arr2">Read full biography</a>

Jump to section page: https://documeantpublishing.com/fullbios.html

When I click the above link it takes me here:

https://documeantpublishing.com/fullbios.html#a1

This is the source code on the page: <div class="wrapper wrapper-1 wow fadeInUp" id="a1" name="a1">

It looks like it's right, but it ends in the middle of a different section.

Any help or advice you can give would be greatly appreciated.

Report · Sep 11, 2021

Named anchors are deprecated. We no longer use them. A unique ID is all that's required now.

That said, with which browsers are you testing your links? I ask because in Firefox, your link takes me to Kilgore-White as it should but it's not immediate probably because the fullbios page contains wow animation and 76 code errors. Code errors cause confusion to browsers and may lead to performance and page rendering problems. See error details below.

https://validator.w3.org/nu/?doc=https%3A%2F%2Fdocumeantpublishing.com%2Ffullbios.html

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 11, 2021

Nancy,

First, thank you for responding. I know name is depreciated but I had to try something. I'm using Chrome. I checked in FF as you suggested and see what you mean. Thanks for that heads up. What do you see on Chrome?

I can't believe I have errors again! I tested each page until clear and now it looks like I have to go back and retest. Agh! I just love fixing stuff twice?! LOL.

Ginger

Report · Sep 11, 2021

It works about the same for me in Firefox, Chrome and MS Edge.

In case you're interested, it's possible to achieve smooth-scrolling in most modern browsers with a couple lines of CSS. No special scripts required. https://caniuse.com/?search=scroll-behavior

Working Demo:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Smooth Scroll Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
scroll-behavior: smooth;
scroll-snap-type: y proximity;
/* Reserve space for heading */
scroll-padding-top: 14vh;
}
body {
width: 75%;
margin: 0 auto;
}
nav {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: center;
background-color:white;
}
nav a {
background-color: black;
margin:0 2% 0;
padding:3%;
color:white;
font-size:1.5rem;
text-decoration:none;
}
main {display:flex; flex-direction: column;}

section {
padding:5%;
background-color:linen;
border-bottom:16px solid white;
}
</style>
</head>
<body>
<h1>Smooth Scroll Demo</h1>
<p>Click links below to scroll</p>
<nav>
<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#4">4</a>
<a href="#5">5</a>
</nav>
<main>
<section id="1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima consequatur dicta nemo velit fugit molestiae aut, deserunt laborum odit sed distinctio vel!</p>
</section>
<section id="2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima </p>
</section>
<section id="3">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima consequatur dicta nemo velit fugit molestiae aut, deserunt laborum odit sed distinctio vel!</p>
</section>
<section id="4">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima consequatur dicta nemo velit fugit molestiae aut, deserunt laborum odit sed distinctio vel!</p>
</section>
<section id="5">
<h2>Section 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint, hic id deleniti natus aspernatur est minima consequatur dicta nemo velit fugit molestiae aut, deserunt laborum odit sed distinctio vel!</p>
</section>
</main>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, voluptatem id ut. Commodi sint sapiente beatae reprehenderit. Possimus itaque illo, dignissimos aspernatur modi blanditiis ducimus necessitatibus alias, unde eaque sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, voluptatem id ut. Commodi sint sapiente beatae reprehenderit. Possimus itaque illo, dignissimos aspernatur modi blanditiis ducimus necessitatibus alias, unde eaque sit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, voluptatem id ut. Commodi sint sapiente beatae reprehenderit. Possimus itaque illo, dignissimos aspernatur modi blanditiis ducimus necessitatibus alias, unde eaque sit.</p>
<hr>
<footer>Footer goes here</footer>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

jump link to a section on another page