Automated jQuery Anchor Navigation with Custom Pixel Offset

Question

Automated jQuery Anchor Navigation with Custom Pixel Offset

Visit our live page:

After incorporating some jQuery code (with the help of StackOverflow), I have managed to automate the linking of my chapter titles. For instance, clicking on "Chapter Three" will take you directly to the third chapter on the page.

If you look at the live page, you'll notice that my sticky navigation bars obstruct the beginning of each chapter. I am looking for a way to offset each jQuery anchor by 200px vertically so that the starting point of each chapter is correctly displayed.

Here is the HTML structure for the Chapters Nav:

<nav id="chapters">
    <ul>
        <li><a href="#">Chapter One</a></li>
        <li><a href="#">Chapter Two</a></li>
        <li><a href="#">Chapter Three</a></li>
    </ul>
</nav>

This is how the Article section is structured in HTML:

<article class="clearfix">  
    <h1>Chapter One</h1>
    ...
</article>

Below is the jQuery code snippet being used:

// Chapters - locate the navigation and headers
var nav = $('#chapters li a'),
    articles = $('#main article > h1');

// Assigning unique ids/hrefs to each chapter
nav.each(function (i) {
    nav.eq(i).attr('href', '#article-' + i);
    articles[i].id = 'article-' + i;
});

jquery css automation anchor

Answer 1

Answer №1

To achieve this, you can rearrange the elements as follows:

<h1>Chapter One<a id="article-0" style="position: relative; top: -200px;">&nbsp;</a></h1>

In this code snippet, the anchor being linked is not within the h1 tag but inside a 'stub' element that is positioned lower by a few pixels.

An improved approach would be to use CSS classes like so:

.v-offset { 
    position: relative;
    top: -200px;
}

...

<h1>Chapter One<a id="article-0" class="v-offset">&nbsp;</a></h1>

You can utilize jQuery's append() method for dynamically adding the anchors:

nav.each(function (i, ele) {
    $(ele).attr('href', '#article-' + i); // $(ele) == $nav.eq(i)
    $(articles[i]).append('<a id="article-' + i + '" class="v-offset">& </a>');
});

Answer 2

To achieve this, you can rearrange the elements as follows:

<h1>Chapter One<a id="article-0" style="position: relative; top: -200px;">&nbsp;</a></h1>

In this code snippet, the anchor being linked is not within the h1 tag but inside a 'stub' element that is positioned lower by a few pixels.

An improved approach would be to use CSS classes like so:

.v-offset { 
    position: relative;
    top: -200px;
}

...

<h1>Chapter One<a id="article-0" class="v-offset">&nbsp;</a></h1>

You can utilize jQuery's append() method for dynamically adding the anchors:

nav.each(function (i, ele) {
    $(ele).attr('href', '#article-' + i); // $(ele) == $nav.eq(i)
    $(articles[i]).append('<a id="article-' + i + '" class="v-offset">& </a>');
});

Answer 3

Answer №2

To achieve indentation, apply either margin-left:200px or padding-left:200px to the specified element.

Answer 4

To achieve indentation, apply either margin-left:200px or padding-left:200px to the specified element.

Answer 5

Answer №3

If you wish to shift the text in a list, there are different ways to achieve that effect:

Using HTML

<ul>
    <li>test</li>
    <li>test2</li>
    <li>test3</li>
</ul>

With CSS

  ul{
        margin-left:200px;
    }

Alternatively,

Using HTML

<ul>
    <li>test</li>
    <li>test2</li>
    <li>test3</li>
</ul>

In CSS

li{
    text-indent:200px;
    list-style-type: none;
}

Answer 6

If you wish to shift the text in a list, there are different ways to achieve that effect:

Using HTML

<ul>
    <li>test</li>
    <li>test2</li>
    <li>test3</li>
</ul>

With CSS

  ul{
        margin-left:200px;
    }

Alternatively,

Using HTML

<ul>
    <li>test</li>
    <li>test2</li>
    <li>test3</li>
</ul>

In CSS

li{
    text-indent:200px;
    list-style-type: none;
}

Automated jQuery Anchor Navigation with Custom Pixel Offset

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to load jQuery dialog from the Controller/View?

The bottom border of the check boxes is not displaying in Internet Explorer

The HTML element seems to be missing its height parameter

Splitting a string into individual parts using PHP

Create a custom ajaxComplete function for a specific ajax request

JavaScript: Replace image title on mouse over

Prevent the body from being redirected to the static menu

What is the method for determining the numerical worth of the px containers?

Using jQuery, extract the input value and verify its accuracy. If correct, display the number of accurately predicted results

The evaluation of jQuery did not function properly on the less.css file

Storing data with jQuery

I'm encountering an issue with the submission button in the wizard, I suspect it could be a problem

Using an Ajax call to show a date picker when a button is clicked

Creating a unique Bootstrap 4 custom checkbox design without the use of the "for" attribute on the label

Is there a way to smoothly incorporate a new animation into a page, while ensuring that existing elements adjust to make room for it?

Alter the URL path with the help of jQuery

I'm finding it difficult to grasp the concept of CSS positioning

Adjust the font size within the grid layout

Angular and Datepair seem to have trouble cooperating

Every time I use Get for ajax calls, I keep getting hit with a frustrating