jump link to a section on another page

Explorer ,
Sep 11, 2021 Sep 11, 2021

Copy link to clipboard

Copied

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.

 

 

Views

72

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 11, 2021 Sep 11, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 11, 2021 Sep 11, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 11, 2021 Sep 11, 2021

Copy link to clipboard

Copied

LATEST

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines