Navigate through pages using scrollspy without losing your position when returning

Question

Navigate through pages using scrollspy without losing your position when returning

Hey all you web geeks out there, I could really use your help solving a little issue.

I've been working with Bootstrap to build a website that utilizes scrollspy for navigating different sections of the page using the navbar. The only way I could stop the URL from showing "#section-2" when scrolling was by calling my JavaScript in the <head>.

Here's the problem...

I tried adding an FAQ section as its own separate page, and wanted it to link back to specific parts of the original page.

It seems like the FAQ <a> tag doesn't work unless the browser is resized...

Two bugs already with scrollspy! Is it common for Bootstrap to have this many issues?

Check out the code below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>
        Day &amp; Night | Responsive Web Design
    </title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">


    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
    </script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">
    </script>
</head>

 ...

</body>

</html>

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

If you have a jQuery function in place that automatically scrolls to each menu link section, but you want to exclude the FAQ link and redirect when it is clicked, you can modify the script like this:

//trim the spaces and check if the text of the menu link is not equal to 'FAQ'
if ($.trim($(this).html()) != 'FAQ') {
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
} else {
    //if it is, redirect to the page
    window.location.href = $(this).attr('href');
}

View Full Screen (jsfiddle)

Edit:

Regarding a comment about linking back causing an issue with scrollspy, you can make adjustments by following these steps:

when trying to link back I am using ""; which is throwing off the scrollspy by adding #section-2 to the url.

To address this challenge, you need to remove the existing function

$('.navbar li a').click(function(event) {

entirely and replace it with the provided code snippet:

$("document").ready(function() {
      $(document).on('click','.navbar li a',function(event) {
          alert($(this).html());
        event.preventDefault();
        if($.trim($(this).html())!='FAQ'){
            $($(this).attr('href'))[0].scrollIntoView();
            scrollBy(0, -offset);
          }
          else
          {
              window.location.href = $(this).attr('href');
          }

      });

   // Additional logic here to handle redirection from FAQs page
  
});

In order for this solution to work properly, ensure that each <a> tag has a unique id attribute assigned, like so:

<a href="#section-1" id="a-section-1">
<a href="#section-2" id="a-section-2">

Finally, you can see a demonstration of how the trigger functionality functions here: demo

Answer 2

If you have a jQuery function in place that automatically scrolls to each menu link section, but you want to exclude the FAQ link and redirect when it is clicked, you can modify the script like this:

//trim the spaces and check if the text of the menu link is not equal to 'FAQ'
if ($.trim($(this).html()) != 'FAQ') {
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
} else {
    //if it is, redirect to the page
    window.location.href = $(this).attr('href');
}

View Full Screen (jsfiddle)

Edit:

Regarding a comment about linking back causing an issue with scrollspy, you can make adjustments by following these steps:

when trying to link back I am using ""; which is throwing off the scrollspy by adding #section-2 to the url.

To address this challenge, you need to remove the existing function

$('.navbar li a').click(function(event) {

entirely and replace it with the provided code snippet:

$("document").ready(function() {
      $(document).on('click','.navbar li a',function(event) {
          alert($(this).html());
        event.preventDefault();
        if($.trim($(this).html())!='FAQ'){
            $($(this).attr('href'))[0].scrollIntoView();
            scrollBy(0, -offset);
          }
          else
          {
              window.location.href = $(this).attr('href');
          }

      });

   // Additional logic here to handle redirection from FAQs page
  
});

In order for this solution to work properly, ensure that each <a> tag has a unique id attribute assigned, like so:

<a href="#section-1" id="a-section-1">
<a href="#section-2" id="a-section-2">

Finally, you can see a demonstration of how the trigger functionality functions here: demo

Answer 3

Answer №2

Assign an identifier to the initial div such as dynaDiv and update

<a href="/faq"> FAQ </a>

to

<a href="/faq" onclick='addFAQ();'> FAQ </a>

. Create a function as follows:

function addFAQ(){
  $("#dynaDiv").load("./faq.html");
}

Answer 4

Assign an identifier to the initial div such as dynaDiv and update

<a href="/faq"> FAQ </a>

to

<a href="/faq" onclick='addFAQ();'> FAQ </a>

. Create a function as follows:

function addFAQ(){
  $("#dynaDiv").load("./faq.html");
}

Navigate through pages using scrollspy without losing your position when returning

Answer №1

Edit:

Answer №2

Similar questions

Fix the Bootstrap navbar that is obstructing the link to content on the page

Float: A threshold reached when adding 1 no longer has any effect

Enhancing performance by implementing cache mechanism for storing search results in a table with multiple filtering options using Vue

Leveraging the power of jQuery's $.when and $.then methods for efficiently managing multiple AJAX requests that do not

Using ReactJS to return a component from a function

Have you ever wondered why MEAN.js applications use the #! symbol at the start of their URLs

Activate dropdown to trigger a function that fetches dates and disables them in the datetimepicker

React Bootstrap encountered rendering issues

Creating real-time chat using Node.js

Transforming .POST into corresponding .AJAX techniques

Error encountered when using prisma findUnique with where clause

Issues with Angular functionality

Show a multipage report of a MySQL database

Client-Side Isomorphic JS: A Guide to Using HTTP Requests

There seems to be a problem with completing the Axios post request in the Javascript Front

The functionality of the Bootstrap carousel may be compromised when initialized through JavaScript

Webpack in Vuejs does not have access to the keys defined in dev.env.js file

Revealing Transition Element on mouseover

Exploring the functionality of the onblur HTML attribute in conjunction with JavaScript's ability to trigger a

Obtain details regarding a worker's collision