Scrollspy Using the Full URL

Question

I am trying to get scrollspy to work when using an absolute url, not a # binding.

For example, I can easily run scrollspy using only <a href="#section1"></a>

I would like to be able to run scrollspy using <a href="http://myurl.com/#section1"></a>

The reason for this is the main navigation on the scorllspy homepage, but the blog is not part of the homepage. When you visit the blog, and then clicking the somthing link on the main page, you will get the route http://myurl.com/blog/#section1 , and not the identifier of the home page.

I found this solution ( use url and hash with scrollspy bootstrap ) but couldn't make it fully functional. After some tweaking and many combinations of regular expressions, I could make her add an active class to the first menu item, but it will not update.

Any thoughts on how to make this work? Is there an alternative js library I should use?

Solution thanks to Troy

 jQuery(function($){ // local url of page (minus any hash, but including any potential query string) var url = location.href.replace(/#.*/,''); // Find all anchors $('.nav-main').find('a[href]').each(function(i,a){ var $a = $(a); var href = $a.attr('href'); // check is anchor href starts with page URI if (href.indexOf(url+'#') == 0) { // remove URI from href href = href.replace(url,''); // update anchors HREF with new one $a.attr('href',href); } // Now refresh scrollspy $('[data-spy="scroll"]').each(function (i,spy) { var $spy = $(this).scrollspy('refresh') }) }); $('body').scrollspy({ target: '.nav-main', offset: 155 }) }); 

I added $('body').scrollspy({ target: '.nav-main', offset: 155 }) to get the data offset after reapplying after updating scrollspy. After some trial and error, this is the only solution I could find.

Answer 1

The scrollspy code is encoded, it looks at the anchors for which href starts with # .

There is one way to do this. Not really, but it can work.

Once the page loads, in your jQuery ready function, find the document for all anchors (inside your target container or body) and check if the start of href starts with your hostname and then /# , and if it matches the change, then the href anchor will be just part after #

Here is an approximate code (not verified) that you could try (let's say your scrollspy target is a div with id #navbar :

 jQuery(function($){ // local url of page (minus any hash, but including any potential query string) var url = location.href.replace(/#.*/,''); // Find all anchors $('#navbar').find('a[href]').each(function(i,a){ var $a = $(a); var href = $a.attr('href'); // check is anchor href starts with page URI if (href.indexOf(url+'#') == 0) { // remove URI from href href = href.replace(url,''); // update anchors HREF with new one $a.attr('href',href); } // Now refresh scrollspy $('[data-spy="scroll"]').each(function (i,spy) { $(spy).scrollspy('refresh'); }); }); }); 

Now make sure you run this one after , download the bootstrap.min.js file.

If you initialize your ScrollSpy using javascript and not through the data- * attributes, replace the three lines of code where scrollspy is updated with the code to initialize the target and scrollspy settings.

Answer 2

Or you can add the data-target attribute to the link element: data-target="#link"

 <a href="http://www.site.ru/#link1" data-target="#link1">Link1</a> <a href="http://www.site.ru/#link2" data-target="#link2">Link2</a> 

Answer 3

I hope this helps anyone who falls into the same situation as me.

Watch it live: Live Sample (website built on WordPress, roots.io and Bootstrap 3)

Below you can see that I conditionally do this when not on the main page. This leaves the spyware behavior intact on the main page and changes the links to link to their respective sections on the main page when clicking on pages other than the main page.

This is what I came up with (pretty well tested)

You just need to replace jQuery / css selectors as needed.

Here is a complete snippet that uses spy scrolling, the solution above and a bit of smooth section scrolling action

 /** * Scroll Spy via Bootstrap */ $('body').scrollspy({target: "#nav_wrapper", offset:50}); /** * Scroll Spy meet WordPress menu. */ // Only fire when not on the homepage if (window.location.pathname !== "/") { // Selector for top nav a elements $('#top_main_nav a').each( function() { if (this.hash.indexOf('#') === 0) { // Alert this to an absolute link (pointing to the correct section on the hompage) this.href = "/" + this.hash; } }); } /** * Initiate Awesome Smooth Scrolling based on a.href */ $('a.smooth-scroll, #top_main_nav a').click( function() { target = $(this).attr('href'); offset = $(target).offset(); $('body,html').animate({ scrollTop : offset.top }, 700); event.preventDefault(); }); 

Show it live