Scrollspy / Onepager

If the page is operated as an onepager, Scrollspy recognizes at which point it is being scrolled and sets an active class to the respective menu item. This menu item can be styled differently and you always know which one is currently part on the page. Live Preview



Set up a page, fill it with content and give every part an unique id. Scrollspy need the ids, otherwise it will throw Javascript errors on every scroll event.

<section id="one"> 
   your content

<section id="two"> 
   your content

Now navigate in the backend to Appearance > Menus and set a Custom Link only in the short version to the anchor.



Second example is wrong, Scrollspy will not work and throws errors.


Now Scrollspy must be activated only on this page. Use a function to activate on scrollspy page by id:

// Activate Scrollspy on page by id
function add_scrollspy() {
    if( is_page('2257') ) { // Page id
      echo "<script>
        jQuery(document).ready(function ($) {
            var scrollSpy = new bootstrap.ScrollSpy(document.body, {
                target: '#bootscore-navbar',
                offset: 58
add_action( 'wp_footer', 'add_scrollspy', 0 );

Code goes to functions.php in child-theme. Replace 2257 in line 4 with your page id and set offset in line 9 to the height of your navbar. You will find the id of your page in page edit screen in browser url /wp-admin/post.php?post=2257&action=edit.


The collapsed navbar will close by itself by clicking a nav-link.

Mixed Onepager / Multipager

It is rare that an onepager is a real onepager. There are always pages like privacy, terms etc. which are better placed on their own pages. Likewise, the individual sections in a onepager often have links to further information. For these kind of websites, only the front page is an onepager, all others are normal static pages.

This theme has a script that scrolls to id from external url. By clicking the download button in the navbar, you will be taken to the top of the front page first, and then scrolled down to the download section. This link #four leads directly to <section id="four">...</section> on the onepage demo site. This will always guide you to the right place from external links.

For this, the menu links are required in full length. As described above, Scrollspy may only be activated on the one-pager side. Two different menus are required for this. I use conditional menus plugin which exchanges the menus.

Create a menu and name it for example “Main Menu Onepager” and set the links:


Create a second menu and name it for example “Main Menu” with the same link names and set the links:


Now go to Appearance > Menus > Manage Locations and set the Main Menu to “main_menu”. Click the link “+ Conditional Menu” and set the “Main Menu Onepager” to the onepager site only.

2 Comments on “Scrollspy / Onepager”

  • Arthur Barkhuysen


    Great theme, one question are you planing on removing jQuery from BootScore?

    • Basti


      Hi Arthur,

      thank you very much.

      jQuery is integrated by WordPress, not by bootScore and is used by almost all WP plugins. So, switching to pure JS does not bring any clear advantages and coding becomes much more complicated. The answer is: Not planned yet.

      Hope that helps


Comments are closed.

To top