Skip to main content
gingermarks
gingermarks
Inspiring
September 11, 2021
Question

jump link to a section on another page

  • September 11, 2021
  • 1 reply
  • 374 views

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.

 

 

    This topic has been closed for replies.

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 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
    gingermarks
    gingermarksAuthor
    Inspiring
    September 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

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 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
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices