Scroll to a new section of the page if the specified id or name cannot be found

Question

Scroll to a new section of the page if the specified id or name cannot be found

Currently, I am dealing with an exceptionally lengthy textual content page.

<p class="parahead">401. Heading </p>
<p>other html content</p>
<p class="c2">some more data</P>
...
<p class="parahead">402. Another heading </p>
<p>other html content</p>
...

Unfortunately, it is not feasible to assign an Id or name property to each of these paragraph elements. However, jQuery is present on the page. My query is whether it is achievable to navigate within the page based on the content of the paragraphs. I prefer not to add any additional tags dynamically as this may impede the page's loading speed.

update: To provide further insights into the issue - I have two HTML files, referred to as A and B. File A serves as the source while B contains explanations about A. During the scroll event in A, I can extract the content/id of the current paragraph within the viewport. Upon clicking a button within the wrapper around A, the user should be directed to the relevant section in B (comprising explanations related to A).

jquery html css

Answer 1

Answer №1

Here is one way you could approach it:

//When the paragraph is clicked
$('.parahead').click( function(){

//Get the number inside the paragraph
var page = $(this).text().split(".");

//Go to a specific page like 401.html
window.location.replace("./" + page[0] + ".html");
});

Does this solution meet your requirements?

Answer 2

Here is one way you could approach it:

//When the paragraph is clicked
$('.parahead').click( function(){

//Get the number inside the paragraph
var page = $(this).text().split(".");

//Go to a specific page like 401.html
window.location.replace("./" + page[0] + ".html");
});

Does this solution meet your requirements?

Answer 3

Answer №2

On the contrary,

My goal is to refrain from inserting any additional tags to this html on the fly in order to maintain optimal page load speed

Despite my intentions, I end up including a dynamic element during the page load process.

$(function(){
        addTags();
        function addTags(){
        $('.parahead').each(function (){
            var id = parseInt($(this).text());
            console.log(id);
            $(this).after("<span name='parahead" + id +"'></span>");
        });
        }
});

Answer 4

On the contrary,

My goal is to refrain from inserting any additional tags to this html on the fly in order to maintain optimal page load speed

Despite my intentions, I end up including a dynamic element during the page load process.

$(function(){
        addTags();
        function addTags(){
        $('.parahead').each(function (){
            var id = parseInt($(this).text());
            console.log(id);
            $(this).after("<span name='parahead" + id +"'></span>");
        });
        }
});

Scroll to a new section of the page if the specified id or name cannot be found

Answer №1

Answer №2

Similar questions

Exploring nested elements with JQuery

Selecting an option on JQuery UI Autocomplete replaces the displayed label with its corresponding value

Using Background Images in Emails with HTML

Adding style tags dynamically to a component and then encapsulating the styles again (using Angular)

Refreshing a webpage is not necessary when using a JQuery form within a div

Manipulating data in textarea using datatables

Concealing the rear navigation button within the material carousel

Interactive HTML and PHP form designed to compute and display the result of a straightforward mathematical equation

Ensure to verify the dimensions and size of the image prior to uploading

Highcharts displaying black color after AJAX refresh

Display dynamic text from an input field in another div along with a checkbox

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

How can JavaScript onClick function receive both the name and value?

Can someone help me troubleshoot why my multi-step form is not functioning properly?

Using JQuery to dynamically set dropdown option values from a JSON object

Tips for preventing images from stretching the width and height of my HTML

Utilize jQuery to serialize the HTML input elements that are dynamically generated outside of the form

The input field in Angular dynamically populates values into multiple instances of the same text

Exploring the Combination of jQuery UI and ASP.NET

Avoiding line breaks for a div positioned on the right within a flexible container