This website uses cookies to personalise ads and to analyse traffic ok
web design

Page scroll to id for WordPress tutorial

Complete tutorial for using Page scroll to id WordPress plugin on your theme.

Installation

Page scroll to id - WordPress tutorialTo install Page scroll to id click ‘Add New’ under ‘Plugins’ menu in WordPress and perform a search for the terms ‘Page scroll to id’. Find the plugin in the search results and click ‘Install/Install Now’.

When installation is finished, click ‘Activate Plugin’.

Page scroll to id is now activated and ready to use in your WordPress theme.

Creating links in WordPress Menus

Go to ‘Appearance : Menus’ to create your menu links that will be handled by the plugin. Click the ‘Links’ label on the left and fill in the ‘URL’ and ‘Link Text’ with your data. The ‘URL’ should normally be in the form of #section-id or http://site.com/page/#section-id depending on how/where you use your menu in your theme.

When ready, click ‘Add to Menu’ to add the custom link you created in your WP menu.

Click ‘Screen Options’ at the top of the page and check ‘Link Relationship (XFN)’. This enables us to add a rel attribute value in our links in order to “connect” them with Page scroll to id.

Click the link you created and insert m_PageScroll2id in the ‘Link Relationship (XFN)’ field.

Save your menu. Any menu item with m_PageScroll2id value in the ‘Link Relationship (XFN)’ field will be handled by the plugin.

Any link in your HTML with m_PageScroll2id rel attribute value will be handled by the plugin. For example:

<ul>
  <li><a href="http://site.com/#section-1" rel="m_PageScroll2id">Section 1</a></li>
  <li><a href="http://site.com/#section-2" rel="m_PageScroll2id">Section 2</a></li>
  <li><a href="http://site.com/#section-3" rel="m_PageScroll2id">Section 3</a></li>
</ul>

<a href="#top" rel="m_PageScroll2id">Back to top</a>

You can create links in your posts, pages etc. using plugin’s ps2id shortcode. For example:

[ps2id url='http://site.com/#section-1']Section 1[/ps2id]

To make your links work from any page, you need to add the full address in your links href/URL field (instead of just the hash with the id). For example, http://site.com/#section-1 will work on the same and different pages, while #section-1 will only work on the same page.

To enable page animation on such links, you’ll also need to enable ‘Scroll to location hash’ option in plugin settings (see below).

There are cases where you cannot edit theme’s markup or you need to activate the plugin on non-WP menu pre-generated links. To make Page scroll to id handle any kind of link, you’ll need to add your links selector in plugin settings.

Go to ‘Settings : Page scroll to id’ and insert your links selector in the ‘Selector(s)’ field, for example: .menu-item a. You can change plugin selector or add your own in addition to the default one, e.g. a[rel='m_PageScroll2id'], .menu-item a. Click ‘Save Changes’ to activate the plugin on each selector.

To find a link selector on themes you didn’t code yourself, open your page in a Chrome or Firefox, right-click the link and select ‘inspect element’. This will open browser’s developer tools where you can see the HTML source and determine what its selector should be. For example, if your link is inside a <li class="menu-item" /> wrapped in a <ul class="menu" />, your link selector could be: .menu .menu-item a.

Divi WordPress Theme

Creating the target sections

Creating target sections manually

Wrap your content in a div with an id attribute (recommended for better link highlighting) or add anchor points (with id attributes) before each section. Examples:

<div id="section-1">
  <p>Section 1 content...</p>
</div>

<div id="section-2">
  <p>Section 2 content...</p>
</div>

<div id="section-3">
  <p>Section 3 content...</p>
</div>
<a id="section-1"></a>
<div>
  <p>Section 1 content...</p>
</div>

<a id="section-2"></a>
<div>
  <p>Section 2 content...</p>
</div>

<a id="section-3"></a>
<div>
  <p>Section 3 content...</p>
</div>

Creating target sections in the editor via shortcodes

You can create sections in your posts, pages etc. using plugin’s ps2id and ps2id_wrap shortcodes. Examples:

[ps2id id='section-1'/]
[ps2id_wrap id='section-1'] content [/ps2id_wrap]

Offsetting fixed/sticky menus

To prevent your fixed positioned menu overlapping your section(s) when the page is animated, you need to set an offset value in plugin settings.

Go to ‘Settings : Page scroll to id’, insert your offset value in the ‘Offset’ field and click ‘Save Changes’. If your menu height for example stays always the same, you should insert a fixed pixel value in the field, e.g. 50. If your menu is responsive and its height changes according to viewport, you should insert its selector in the ‘Offset’ field. For example: #navigation-menu or header .menu etc.

Scrolling on page load

When you click a link that points to a different URL/page section, you can enable page scrolling animation via the ‘Scroll to location hash’ option in plugin settings.

Page scroll to id - WordPress tutorial Go to ‘Settings : Page scroll to id’, check ‘Enable’ in ‘Scroll to location hash’ and click ‘Save Changes’.

The plugin highlights the links automatically. When a target section is visible within the browser viewport, Page scroll to id adds the highlight class(es) to the target element and its associated link. When the target is not visible (out of the viewport), those classes are removed.

The default highlight classes for the links are: mPS2id-highlight, mPS2id-highlight-first and mPS2id-highlight-last.

You can use those classes in your theme’s stylesheet (e.g. style.css) to style current/highlighted links. For example:

.menu-item a{
  color: #545cf5;
}
.menu-item a.mPS2id-highlight{
  color: #f18b01;
}

Depending on the length of your target sections you might have more than one links highlighted, for instance when your sections are short enough and two or more are visible within the viewport. In such case, you’ll probably want to use the mPS2id-highlight-first or mPS2id-highlight-last classes in your CSS to style only the first or last highlighted link accordingly:

.menu-item a{
  color: #545cf5;
}
.menu-item a.mPS2id-highlight-first{
  color: #f18b01;
}
Page scroll to id - WordPress tutorial Note that the highlight classes are added on all links handled by the plugin. If you use Page scroll to id only on your menu links this is fine but if you use it on other links as well (e.g. on back-to-top link), you’d normally want highlighting to apply only on the links in your menu. You can restrict highlighting to specific links in plugin settings, by inserting your menu links selector in ‘Highlight selector(s)’ field. For example: #navigation-menu a or header .menu a etc.

Keeping links highlighted when target elements have zero length

When setting your target sections as anchor points in your content, for example:

<a id="section-1"></a>
<div>
  <p>Section 1 content...</p>
</div>

your targets (in the example above: #section-1) have 0 height, meaning you links might not stay highlighted long enough when scrolling down the page. To adjust this, you’ll need to check ‘Keep highlight until next’ and/or ‘Highlight by next target’ in plugin settings.

 


414 Comments

Post a comment

Comments pages: 1 3 4 5

  1. Tomey
    Posted on January 10, 2017 at 00:39 Permalink

    Malihu
    i was able to resolve it. Was missing mi id. Your plugin is great! thanks a lot!!!

    Reply
  2. Tomey
    Posted on January 10, 2017 at 00:30 Permalink

    Hi Malihu

    The anchor is working fine when i´m on my homepage.

    EX : http://www.neusscapital.com/nuevaweb/#somos-neuss

    But when i go to another page, and click in the same menu item, it goes back to the home but the scroll doesn´t works. I´ve already cliked ” enable scroll to location hash”

    Can you help me? thanks a lot!

    Reply
  3. Jamie P.
    Posted on January 6, 2017 at 20:23 Permalink

    I’ve browsed through the comments to try to troubleshoot the problem, but I still can’t seem to get things working. I feel that maybe it’s the theme that’s interfering with this script, but I can’t pinpoint the issue. Can I get help with this? Many thanks!

    Reply
    • malihu
      Posted on January 7, 2017 at 00:24 Permalink

      Indeed the theme has a script which prevents “Page scroll to id” from handling your links and page scrolling.

      The script in question is the one here:
      ...themes/bridge/js/default.min.js

      Since it’s minified, I can’t be 100% certain which code to change, but my guess is to change:
      $j(document).on("click",".main_menu a, .vertical_menu a
      to:
      $j(document).on("click",".vertical_menu a
      which is to remove the .main_menu a selector from the click function.

      After you do this, you need to give your menu links the class ps2id or the “Link Relationship (XFN)” value m_PageScroll2id as shown in the guide above.
      This is because your theme probably alters the menu internally, so “Page scroll to id” cannot be enabled on your menu links automatically.

      Doing the above should do the trick

      Reply
  4. Han
    Posted on January 5, 2017 at 22:22 Permalink

    Hi, I’m trying to get your promising plugin working in a GeneratePress themed site, but presumably I’m overlooking something, as no smooth scrolling is happening. I created the links as described above. The site address: http://www.ambtdoesburg.nl/hart
    Thanks for your time 😉

    Reply
    • malihu
      Posted on January 6, 2017 at 04:32 Permalink

      Hi,

      Your links are currently handled by another js script which is in lines 351 to 364 of your index. This script prevents “Page scroll to id” from scrolling the page, so if you remove/comment its code, you should be able to work with “Page scroll to id”.

      You also need to create the target elements because at the moment, your theme uses a different attribute for its targets (name instead of id).

      You also have a non-existing file inclusion (jquery.malihu.PageScroll2id.min.js) in line 348 of your index (it returns a 404 console error).

      Hope this helps

      Reply
      • Han
        Posted on January 6, 2017 at 15:45 Permalink

        Thanks for answering, Malihu. I indeed tried a script I found on the GP blog, which seems to work for the moment. I’ll look into your comments to see what I did wrong when using ps2id. It seems to have more possibilities, which I obviously prefer 😉
        But thanks for now (y)

        Reply
  5. Tino
    Posted on December 31, 2016 at 08:27 Permalink

    Hi, is there any chance we can reuse the scrolling after it has been used once? I place a rel attribute to my target below in WordPress, and it seems I can only click/use/scroll once and it didn’t refresh itself.

    Reply
    • malihu
      Posted on January 2, 2017 at 22:02 Permalink

      Hi,

      The scrolling can be used infinite times, so there might be an issue with your implementation(?)
      The rel attribute should be added on the link (not the target element). Is this the case?

      If you can post your link I’d be able to see what happens and help.

      Reply
  6. Maria
    Posted on December 31, 2016 at 03:52 Permalink

    Thank you for creating this plugin; it comes recommended from a fellow Beaver Builder.

    My teenage boy wants a horizontally scrolling website to showcase his artwork. The Page Scroll to ID plugin was recommended as a compliment to WP Beaver Builder setup. I don’t seem to be setting up the menu correctly or the plugin settings to enable scrolling. I’ve tried to follow the directions, but am having trouble. Could you assist, please?

    With Gratitude,
    Maria Lara

    Reply
    • malihu
      Posted on January 2, 2017 at 22:09 Permalink

      Hello Maria,

      In order to use “Page scroll to id” in a horizontal layout, your theme has to be already laid-out horizontally. The plugin’s “Layout” option, simply tells the script that the page/template is in horizontal layout.

      “Page scroll to id” is not a theme mod/page builder where it transforms the theme from vertical to horizontal. You need to have a horizontally laid-out theme in order to make use of its horizontal scrolling.

      Is this the case with your theme? Is your theme’s layout horizontal (i.e. does it have a horizontal scrollbar)?

      Reply
  7. Alvin
    Posted on December 16, 2016 at 20:54 Permalink

    Hi again,

    Can a link be shown like a button? I mean with background color, but only when required. Like the buttons created with shortcodes.

    Regards,

    Alvin

    Reply
    • malihu
      Posted on December 17, 2016 at 11:59 Permalink

      You’d need to style the link manually via CSS or give it the class button in the text wp editor.

      If you want to have buttons that are handled by “Page scroll to id”, you could try adding their selector in plugin settings. For example:

      a)Create a button via your theme’s shortcode and give it a URL with the hash you want (e.g. #seccion-1).

      b)Go to “Page scroll to id” settings and change the “Selector(s)” value to:
      a[rel='m_PageScroll2id'], a.button[href*='#']
      and hit “Save Changes”.

      This way, your buttons that point to sections within the page will be handled by the plugin.

      Reply
      • Alvin
        Posted on January 2, 2017 at 13:56 Permalink

        Thanks for the information. However, when I click on the button, the scrolling isn’t smooth, it actually jump to the section. Any else that I should do?

        Regards and a very happy new year!

        Reply
        • malihu
          Posted on January 2, 2017 at 21:58 Permalink

          Happy new year 🙂

          I can’t seem to find the button… did you fixed it?
          I can see the yellow arrow which seems to work as expected.

          Reply
          • Alvin
            Posted on January 3, 2017 at 11:35 Permalink

            Hi, Please, see the related URL (test page).

            Regards,

            Alvin

        • malihu
          Posted on January 3, 2017 at 22:21 Permalink

          I checked the test page and the button element has an inline javascript click event attached. This event prevents “Page scroll to id” from scrolling the page to the target and it’s probably added by the theme(?)

          I don’t know how you added the button or if there’s a setting to remove such events from it but maybe you could add such button manually in the editor?

          <a href="#seccion-1" class="button small">DESCRUBRE EL CONTENIDO</a>

          Reply
          • Alvin
            Posted on January 4, 2017 at 11:58 Permalink

            Hi, thanks for a quick answer. The code works great! About the button, I added it via a shortcode provided with the WP theme. Best regards.

  8. Alvin
    Posted on December 14, 2016 at 16:10 Permalink

    Hi there, I’d appreciate whether you could tell me if such a menu as explained in this video (https://www.youtube.com/watch?v=kB7GmchMum8) can be done with my website. Specifically, to scroll to the top of each content builder block. I looked at the code, but I can’t find the id for the blocks. Best regards, Alvin

    Reply
    • malihu
      Posted on December 14, 2016 at 18:36 Permalink

      You could create your own targets for each section by using plugin’s shortcode, e.g.:
      [ps2id id='section-1'/]
      See “Creating target sections in the editor via shortcodes” above for more info.

      I don’t know how your theme uses the WordPress post/page editor but you’d normally be able to use the shortcodes.

      Reply
      • Alvin
        Posted on December 15, 2016 at 02:14 Permalink

        Thank you for a quick reply. I tried what you replied, but some sections (most of them) have a background image with a text header and a text block. When I add the shortcode in the text block, the browser scrolls to the begin of the text block, not to the top border of the background image which corresponds to the section top border. I also tried to use offset, but that works well for desktop, not for mobile view. Any idea? Regards, Alvin

        Reply
        • malihu
          Posted on December 15, 2016 at 15:12 Permalink

          Can you add custom CSS in your theme? If yes, try doing the following for each of your sections:

          1. Add the target shortcode in your text block(s) as you’ve done.

          2. Add the following CSS rule to your theme:

          .page_content_wrapper .inner a[data-ps2id-target]{ position: absolute; top: 0; }

          Reply
          • Alvin
            Posted on December 16, 2016 at 12:21 Permalink

            Hi, it works great. Thanks!

  9. Greg
    Posted on December 12, 2016 at 05:51 Permalink

    Hi,

    I am building a website using the new Twenty Seventeen WordPress theme. My site layout looks like this demo site: http://2017.wordpress.net/
    I used the shortcode “Insert Page scroll to id target” on my page sections, and in the plugin settings I set the offset as “.navigation-top” to deal with the sticky menu. The plugin works ok in the full screen (sticky menu), but there is too much offset on the mobile version due to the fact that toggle on menu (mobile menu) is much longer than the sticky menu. Do you have any advice how to properly set up the offset in this theme? The offset is not necessary in the mobile version because the mobile menu is not sticky. Thank you.

    Reply

Comments pages: 1 3 4 5

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php