Trying to make a "Jump to" in a Frequently Asked Question page

jPaulB · Jan 9, 2025

Hi Everybody,

I'm making a pretty basic Frequently Asked Questions page. I've included the code
here:

HTML:

<!DOCTYPE HTML>
<html>
<head>
    <title>Frequently Asked Questions</title>
    <style>
        body {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 15px;
    }
        h1 {
          color: #0066CC;
    }
        h2 {
          color: #003366;
    }
        h3 {
          color: #FF0000;
    }
    </style>
    </head>
    <body>
        <h1>Frequently Asked Questions</h1>
        <h2 id="top">Table of Contents</h2>
        <ol>
          <li><a href="#topic1"><b>Question 1</b></a></li>
          <li><a href="#topic2"><b>Question 2</b></a></li>
          <li><a href="#topic3"><b>Question 3</b></a></li>
          <li><a href="#topic4"><b>Question 4</b></a></li>
          <li><a href="#topic5"><b>Question 5</b></a></li>
        </ol>
        <hr />
        <h3 id="topic1">Question 1</h3>
        <p>Blah - Blah - Blah - Blah</p>
        <h3><a href="#top">Back to Top</a></h3>
        <hr />
        <h3 id="topic2">Question 2</h3>
        <p>Blah - Blah - Blah - Blah</p>
        <h3><a href="#top">Back to Top</a></h3>
        <hr />
        <h3 id="topic3">Question 3</h3>
        <p>Blah - Blah - Blah - Blah</p>
        <h3><a href="#top">Back to Top</a></h3>
        <hr />
        <h3 id="topic4">Question 4</h3>
        <p>Blah - Blah - Blah - Blah</p>
        <h3><a href="#top">Back to Top</a></h3>
        <hr />
        <h3 id="topic5">Question 5</h3>
        <p>Blah - Blah - Blah - Blah</p>
        <h3><a href="#top">Back to Top</a></h3>
        <hr />
    </body>
</html>

The trouble is: all of the <p>Blah - Blah - Blah - Blah</p> parts are three or four paragraphs long.
As it stands, the code will scroll all the way to the keywords. Not pleasant to watch.

How can I make the code "Jump to" the keywords?

Many Thanks,
-Paul

VBService · Jan 11, 2025

The code you provided just do this "jumps" to the keywords.

jPaulB said:
the code will scroll all the way to the keywords

This action will happen when you have the code like

CSS:

body,
html {
  scroll-behavior: smooth;
}

Maybe check an alternative, e.g.
by using <details>

HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Frequently Asked Questions</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem;
      }
      h1 {
        color: #0066CC;
      }
      h2 {
        color: #003366;
      }
      details {
        margin-bottom: 1rem;
        border: 1px solid #003366;
        border-radius: .5rem;
        padding: .5rem;
      }
      summary {
        cursor: pointer;
        font-weight: bold;
        color: #0066CC;
      }
      summary:hover {
        color: #004999;
      }
      details p {
        margin-top: .5rem;
      }
    </style>
  </head>
  <body>
    <h1>Frequently Asked Questions</h1>
    <h2>Table of Contents</h2>

    <details id="q1">
      <summary>Question 1</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </details>
    <details id="q2">
      <summary>Question 2</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </details>
    <details id="q3">
      <summary>Question 3</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </details>
    <details id="q4">
      <summary>Question 4</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </details>
    <details id="q5">
      <summary>Question 5</summary>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </details>
  </body>
</html>

by using <dialog>

HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Frequently Asked Questions</title>
    
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1rem;
      }
      h1 {
        color: #0066CC;
      }
      h2 {
        color: #003366;
      }
      dialog {
        border: 2px solid #003366;
        border-radius: .5rem;
        padding: 1rem;
        max-width: 400px;
      }
      dialog::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
      }
      ol a {
        font-weight: bold;
      }
      dialog button {
        margin-top: 1rem;
        padding: .5rem 1rem;
        background-color: #0066CC;
        color: white;
        border: none;
        border-radius: .5rem;
        cursor: pointer;
      }
      dialog button:hover {
        background-color: #004999;
      }
    </style>
  </head>
  <body>
    <h1>Frequently Asked Questions</h1>
    <h2>Table of Contents</h2>
    <ol>
      <li><a href="#void" onclick="openDialog('q1')">Question 1</a></li>
      <li><a href="#void" onclick="openDialog('q2')">Question 2</a></li>
      <li><a href="#void" onclick="openDialog('q3')">Question 3</a></li>
      <li><a href="#void" onclick="openDialog('q4')">Question 4</a></li>
      <li><a href="#void" onclick="openDialog('q5')">Question 5</a></li>
    </ol>

    <dialog id="q1">
      <h3>Question 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
      <button onclick="closeDialog(this)">Close</button>
    </dialog>
    <dialog id="q2">
      <h3>Question 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
      <button onclick="closeDialog(this)">Close</button>
    </dialog>
    <dialog id="q3">
      <h3>Question 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
      <button onclick="closeDialog(this)">Close</button>
    </dialog>
    <dialog id="q4">
      <h3>Question 4</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
      <button onclick="closeDialog(this)">Close</button>
    </dialog>
    <dialog id="q5">
      <h3>Question 5</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
      <button onclick="closeDialog(this)">Close</button>
    </dialog>

    <script>
      function openDialog(id) {
        document.getElementById(id).showModal();
      }
      function closeDialog(element) {
        //element.parentNode.close();
        element.closest('dialog').close();
      }
    </script>
  </body>
</html>

Dropdown menu in a fixed navbar	2	Apr 1, 2024
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Getting carousel to continually rotate	0	Sep 27, 2017
I need help fixing my website	2	Oct 15, 2023
Help with my responsive home page	2	Dec 14, 2022
I have a problem here at ()	4	Dec 30, 2024
Javascript scroll to sections and also scroll to section but open relevant nav-tab	4	Feb 25, 2022

Trying to make a "Jump to" in a Frequently Asked Question page

jPaulB

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads