Documentation Theme

Scrollspy / Onepager

If the page is operated as an one-pager, 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 resolvable id’s.

<section id="one">
  your content

<section id="two">
  your content

Now navigate in the backend to Appearance > Menus and set Custom Links:

  • https://mydomain.com/#one
  • https://mydomain.com/#two


Scrollspy needs to be activated and assigned to the elements. This example spies on the .entry-content (page content) and highlights the menu-items in #bootscore-navbar (main-nav):

jQuery(function ($) {

  // Activate Scrollspy
    target: '#bootscore-navbar'

  // Refresh Scrollspy
  $('[data-spy="scroll"]').each(function () {


Code goes to child-theme’s custom.js. The refresh snippet is only needed when adding or removing something from the DOM, for example an Isotope.


The collapsed offcanvas navbar closes by itself by clicking a nav-link.

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