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

Page scroll to id for WordPress tutorial

Basic tutorial for using “Page scroll to id” WordPress plugin on your WordPress site.

In order to use the plugin on your WordPress site (after installing and activating it), you need to do the following:

  1. Create id targets the page will scroll to or find existing id attributes in your theme to use with your links.
  2. Create links that point to those targets or enable the plugin on links that already exist in your site.

Divi WordPress Theme

Creating id targets

Creating id targets in post block editor (Gutenberg)

You can create your targets in more than one ways in the block editor, e.g. using the group block, the “Page scroll to id target” block, the shortcode block, block class attribute, HTML anchor field etc.

Create id targets using the group block

Click on the “Add block” icon and select “Group”. This will insert a general container block that can group other blocks and we can add the id on this group/general container block.

On the group block properties (right panel) you can add the id you want in the “HTML Anchor” field.

Create id targets using the “HTML Anchor” field

If you use headings in your content, you can use the “HTML Anchor” attribute of blocks to set a target id. Select your block, click “Advanced” in the right panel and insert the target id you want in the “HTML Anchor” field.

Create id targets using plugin’s “Page scroll to id target” block

The plugin has its own custom block for inserting targets: “Page scroll to id target”

Create id targets using “Additional CSS Class(es)” field

You can generate id targets for any block element, by setting its class name to: ps2id-id-yourid, changing the yourid part to the id value you want.

Click on a block element (e.g. a paragraph), click “Advanced” in the right panel and set the target id you want in the “Additional CSS Class” in the form of:
ps2id-id- plus the id you want.
For example, if you want to create the target id “last-section”, give the element the CSS class:
ps2id-id-last-section.

Create id targets using the shortcode block

You can use plugin’s shortcodes in the block editor. Click on the “Add block” icon and select “Shortcode”.
Add the [ps2id id='section-1'/] in the shortcode field to create a target with id section-1.

You can also use the [ps2id_wrap] shortcode accordingly.

Creating id targets in post visual editor (classic “old” editor)

tinymce-custom-btn-ps2id-target In post visual editor, click the toolbar button “Insert Page scroll to id target” to create a target at the cursor position in the editor.

page-scroll-to-id-target-modal In “Page scroll to id target” modal insert the id value you want (e.g. some-id) and click “OK”. The target shortcode (e.g. [ps2id id='some-id' target=''/]) will appear in the editor. Update/save the post/page. You can now use this id value in your link(s) URL (e.g. #some-id).

Creating id targets in post editor via shortcodes

In post visual or text editor, enter [ps2id id='some-id'/] in the place you want to create the target and set the id attribute to the value you want. This will create a simple anchor-point target. If you want to wrap your content (or part of your content) in a target id (same as adding an id attribute to some content), use the [ps2id_wrap] shortcode:

[ps2id_wrap id='some-id']
your content...
[/ps2id_wrap]

Update/save the post/page so you can use this target value in your link(s) URL (e.g. #some-id).

Click here for more info on target shortcodes

Creating id targets in HTML

Wrap your content in a div with an id attribute (recommended for better link highlighting) or add simple anchor points (with id attributes) before each content 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>
<p>Section 1 content...</p>

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

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

Creating id targets in WordPress widget areas

Create targets in your widget areas (Appearance → Widgets) via plugin’s “Page scroll to id target” widget.
Keep in mind that all WordPress widgets have existing id values that you can use with your links. You can find these id values within each active widget under “Page scroll to id target” label. The option to display these values is “Display widgets id attribute” which is enabled by default.

FAQ

Creating links

page-scroll-to-id-target-menu The plugin is enabled by default on WordPress Menu links (Appearance → Menus), so you can start adding custom links and set their URL to the id/target you want to scroll to.

Edit your menu and add “Custom links” as these type of links allow us to enter a custom URL with the id we want. Your links URL should be in the form of #some-id, http://my-site.com/page/#some-id, /page/#some-id etc.

Please note that if you want your links to work from other/different pages, you’ll need to insert the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id) or the relative-root URL (e.g. /page/#some-id).

You can use plugin’s shortcodes in the block editor. Add the shortcode: [ps2id url='#some-id']link text[/ps2id] inside any block element to create a link that points to the “some-id” target.

Keep in mind that since “Page scroll to id” version 1.6.3, the plugin is enabled by default on all links with a non-empty hash value (e.g. #some-id) in their URL. This means that you don’t have to use plugin’s shortcode to create links, as any link you create via the WordPress editor will work.

tinymce-custom-btn-ps2id-link In post visual editor, click the toolbar button “Insert/edit Page scroll to id link” to create a link at the cursor position in the editor or from text you’ve already selected.

page-scroll-to-id-link-modal In “Page scroll to id link” modal insert the link’s URL and text. The URL should be in the form of #some-id, http://my-site.com/page/#some-id, /page/#some-id etc. When ready, click “OK” and the link will appear in the editor. You can edit the link via both “Insert/edit link” and “Insert/edit Page scroll to id link” buttons, as well as inline.

“Page scroll to id link” modal provides additional options like “Offset” and “Custom class(es)” that can be used to change link’s offset, its scroll duration/speed etc.

In post visual or text editor, enter [ps2id url='#some-id']link text[/ps2id] in the place you want to create the link and set the url attribute and link’s text to the values you want. The shortcode provides the same options as plugin’s “Insert/edit Page scroll to id link” toolbar button via attributes.

Any link with ps2id class or m_PageScroll2id rel attribute value will be handled by the plugin. For example:

<a href="#some-id" class="ps2id">link text</a>
<a href="#another-id" rel="m_PageScroll2id">link text</a>

You can instruct “Page scroll to id” to handle any link in your page(s) by using the “Selector(s)” field in plugin settings.
If you need to enable “Page scroll to id” on all links with URL containing a hash (#), insert the following value in “Selector(s)” field:
a[href*=#]:not([href=#])

Click here for more info on “Selector(s)”

FAQ

Links highlighting

Each time a target element is visible on the screen (i.e. is within the viewport), the plugin adds the mPS2id-highlight class to its associated link or links (i.e. the links that scroll to this target). You can use this class in your theme’s stylesheet or custom CSS to style the current/active link(s), e.g.
a.mPS2id-highlight{ background: #ff0; }

Common case scenario and example

Lets say you have a sticky menu containing links that scroll to various targets/sections within the page. Your links text color is black (which may be set by your theme or some other stylesheet):

.memu-item a{ 
    color: black; 
}

When scrolling through page sections (i.e. targets) you want the link of the visible/current target to become red. You can do this by adding the following CSS:

.memu-item a.mPS2id-highlight{ 
    color: red; 
}

Notes and more info

The default highlight classes for the links are: mPS2id-highlight, mPS2id-highlight-first and mPS2id-highlight-last (you can change these class-names in plugin’s settings if you want).

For more information about the highlight classes and options see “Classes & highlight options”, “Highlight selector(s)” and FAQ below.

FAQ

Offset scrolling for sticky menus

If your page has a top sticky/fixed-positioned menu, you’ll probably need to use plugin’s “Offset” option in order to prevent the menu from overlapping your content. This option allows us to shift (i.e. offset) scrolling, so in the case of a top sticky menu, we usually need to “stop” scrolling a few pixels before the target reaches the top of the page (to accommodate for the space the sticky menu occupies).

Go to Settings → Page scroll to id → Offset and insert an offset amount equal to your sticky menu height (in pixels). You can insert its height value as a number (e.g. 100) or you can insert your menu selector (e.g. #my-sticky-menu), so the plugin calculates its height automatically.

The plugin provides special selector expressions in order to define advanced offsets and work with responsive menus. For more info see “Offset” option.

Scrolling from/to different pages

The plugin has the option to scroll from/to different pages enabled by default. This means that when you click a link which points to a target id on another page, you’ll still get the smooth scrolling effect which will happen immediately after that page is fully loaded.

The only thing you’ll need is to make sure your links have the full address with the target id in their URL (e.g. http://my-site.com/page/#some-id).

Video tutorial


841 Comments

Post a comment

Comments pages: 1 5 6 7 8 9 10

  1. Kawinthida Sareenosak
    Posted on August 4, 2018 at 10:01 Permalink

    Hi, I’m using Local Flywheel to create my site. And I am using Page Scroll to id for my menus. I wonder why every time I do back to edit something on my page, The code is gone and It doesn’t work. I actually saved it every time I done the work but Next time I open the website up again, It’s gone so I need to create the link again. Is it possible that it’s because I’m using flywheel? Please help..

    Reply
    • malihu
      Posted on August 11, 2018 at 23:03 Permalink

      Hello,

      I’m not familiar with Flywheel but what you describe sounds like it a Flywheel/theme/editor issue, although I can’t say for sure.

      The plugin does not save by itself any values (including links) in the post/page editor, builder or wp menus.

      How and what code do you add in your page? Shortcodes? Plain links?
      Do you add them via plugin’s custom buttons?

      I need more info in order to help.

      Reply
  2. the-fabi
    Posted on July 30, 2018 at 19:55 Permalink

    Hi man, I already installed your plugin but it does not work for me. Always send for the top of page, and no for de anchor. Can you help me, please?

    Cheers!

    Reply
    • malihu
      Posted on July 31, 2018 at 10:34 Permalink

      Your HTML code is not correct. You need to add:

      <!DOCTYPE html>

      before the opening <html> tag in your theme.

      Hope this helps

      Reply
      • the-fabi
        Posted on July 31, 2018 at 17:46 Permalink

        Wow man, Thanks, This error is very stupid, but thanks.

        (Y)

        Reply
  3. justin
    Posted on July 28, 2018 at 00:06 Permalink

    I’m building my Morpheus (http://morpheus.smallfacemedia.com/) themed website on localhost. Each page section, on the home page, uses it’s own <section> tag; for example, on the above link you’ll see a section shown as <section id="parallax-presentation" class="page-section">. How can I use these existing sections so that scrolling will automatically scroll to each section?

    Reply
    • malihu
      Posted on July 29, 2018 at 15:28 Permalink

      If your theme has target ids (like the one you posted), then you don’t have to create any targets (you only have to create the links).

      So for example, if you create a link with URL #parallax-presentation, it’ll scroll the page to that target section/id.

      If you want to enable the plugin on any link in your content (even ones not created via “Page scroll to id” buttons), go to plugin settings and change “Selector(s)” option to:

      a[href*=#]:not([href=#])

      Reply
  4. Gareth
    Posted on July 17, 2018 at 08:22 Permalink

    Hi,

    Everything is working fine, however the /#section at the end of the URL in the address bar is not updating as I scroll through the page. Any way to make this happen?

    Thanks!

    Reply
    • malihu
      Posted on July 22, 2018 at 15:03 Permalink

      Hi,

      There’s no way to do this on-the-fly while scrolling the page (via mousewheel, the scrollbar etc.).

      In general, I’d strongly advise against such functionality because it messes with browser’s history and the user experience, without offering anything meaningful to the user.

      This said, you can enable plugin’s “Append the clicked link’s hash value to browser’s URL/address bar” option to have the /#section fragment appear when the user clicks the links and bullets.

      Reply
  5. Hasith
    Posted on July 6, 2018 at 11:06 Permalink

    Hi Malihu,

    Thanks for your amazing plugin. It really helped me. But I have a problem with the offset feature. It doesn’t seem to be working. I tried to stop scrolling the page before my sticky menu by setting the offset to the height of my menu. but it didn’t work. Appreciate your help.

    Thanks.

    Reply
    • malihu
      Posted on July 6, 2018 at 11:17 Permalink

      Hi,

      You have an error in your offset value:

      nav-bar-wrapper:height(73)

      It should be:

      .nav-bar-wrapper:height(73)

      i.e. you need a dot before the class name.

      Hope this helps

      Reply
  6. Tomas
    Posted on July 3, 2018 at 23:32 Permalink

    I’m not able to make the plugin work.
    No errors comes up in the console.
    Can you tell me what I am doing wrong?
    Thanks

    Reply
    • malihu
      Posted on July 4, 2018 at 19:36 Permalink

      The plugin does not work because your theme does not scroll the whole page. All root elements (i.e. html and body) in your theme are hidden without a scrollbar.

      The theme you’re using is currently scrolling an inner element (.content-wrap) that wraps your content. “Page scroll to id” does not work on overflowed inner elements like this.

      I’m not sure why the theme is designed this way but if you add the following CSS in your theme (e.g. as additional css), everything should work:

      html, body, .container, .content-wrap { overflow: auto; height: auto; }

      Let me know if it worked

      Reply
  7. Andy K
    Posted on July 1, 2018 at 00:15 Permalink

    The buttons Insert Page scroll to id target and Insert/edit Page scroll to id link have disappeared from my WP visual editor. It’s hard to use the plugin without them. Where have those buttons gone?
    I’m running WP 4.9.6 with the Genesis Framework Parallax Pro theme. I also use the SiteOrigin editor (although I’m not using it for my current post. “Enable insert link/target buttons in post visual editor” is checked.
    Can you help, Malihu?
    Thanks.

    Reply
    • malihu
      Posted on July 1, 2018 at 01:06 Permalink

      It’s not possible for the “Page scroll to id” buttons to disappear by themselves without any changes to your installation. Did you install/update a plugin?

      Some page builder plugins do not allow third-party plugin buttons (like the ones by “Page scroll to id”) on their editor, so maybe this is the case(?)

      This said, you don’t need the buttons. Plugin’s shortcodes do exactly the same thing, so maybe you could use them directly in the editor.

      Let me know if the shortcodes work for you, otherwise we’ll find another way.

      Reply
    • malihu
      Posted on July 1, 2018 at 03:15 Permalink

      Also note that “Page scroll to id target” is available as a SiteOrigin widget so you can use it in the builder.

      Reply
    • malihu
      Posted on July 2, 2018 at 02:22 Permalink

      I’ve just published a new guide for using the plugin with SiteOrigin Page Builder:

      http://manos.malihu.gr/using-page-scroll-to-id-with-siteorigin-page-builder/

      Reply
  8. Mas
    Posted on June 14, 2018 at 19:53 Permalink

    Hi Malihu,

    Thanks for this Cool Plugin, but I have a question.
    Can this plugins works like this : https://theoffshorepartners.com/

    Each section as you scroll has its own url, I tried creating links manually on the homepage, but no luck

    <a href="#some-id" rel="nofollow">link text</a>
    <a href="#another-id" rel="nofollow">link text</a>

    Thank you

    Reply
    • malihu
      Posted on June 14, 2018 at 21:59 Permalink

      Hello,

      The plugin cannot work like this (at least not without extra code and additional plugins).

      This said, I would avoid this functionality on my website. Changing browser’s URL on-the-fly while scrolling (without an actual action from the user) is not a good thing for like 99% of sites.

      This functionality messes with browser’s history without adding anything meaningful for the user (if I want to see the “previous” page, I just scroll up).
      It changes the way users use the back and forward buttons on their browser which is not a good thing (the user will hit the back button endlessly just to go to the actual previous page). It seriously traps browser’s history.

      This is just my suggestion 🙂

      Reply
  9. Jess Park
    Posted on June 12, 2018 at 10:45 Permalink

    Hello,
    Thank you for your plugin.
    I am using your plugin in my client’s site and it is working nice.

    However, I am curious about your video tutorial.
    In your browser, I can’t see the URL with the each section id in the address bar.

    From mine, whenever click one of menus, I can see the URL with the menu id like https://www.websiteurl.com/#about.

    Can I make it invisible like you did?

    Thank you in advance

    Reply
    • malihu
      Posted on June 12, 2018 at 23:39 Permalink

      To see the hash (#) value in browser’s address bar, you need to enable the “Append the clicked link’s hash value to browser’s URL/address bar” option in plugin settings.

      Do you have this option enabled? If yes, just disable it.

      If you don’t have the option enabled and you still see the URL hash in the address bar, there might be some other plugin (or theme functionality) doing this. If you can post your page URL where you have this issue, I could check it and I’d probably be able to give you a solution.

      Reply
      • Jess Park
        Posted on June 14, 2018 at 03:09 Permalink

        Thank you so much for your reply.
        I’ve checked the option and it was disabled already… Hmm I guess you are right about that some other plugin doing this.. Please take a look the website and let me know what you think.

        Thank you again!

        Reply
        • malihu
          Posted on June 14, 2018 at 22:44 Permalink

          What’s your website URL?

          Reply
        • malihu
          Posted on June 17, 2018 at 00:34 Permalink

          I checked your page and the plugin is currently not enabled on your menu links. This probably happens because your theme uses a custom non-standard menu function which prevents “Page scroll to id” from being enabled on the menu links automatically.

          But don’t worry, it’s very easy to manually enable it on your links.

          Go to “Page scroll to id” settings and change the “Selector(s)” option value to:

          a[href*=#]:not([href=#])

          Save changes and test your page.

          You can read more and find alternative solutions in the “Creating links in WordPress Menus” section above and FAQ.

          Reply
          • Jess Park
            Posted on June 18, 2018 at 05:52 Permalink

            Thank you so much, Malihu!
            I really appreciate your time. It works well! Have a wonderful day. 🙂

  10. Zemunelo
    Posted on June 7, 2018 at 20:27 Permalink

    Hello,
    can I use this plugin to initiate auto scroll to specific element ID after page load?
    The page is for search purpose and I want to auto scroll because in mobile view, the first visible element is side bar.
    I would like to scroll below sidebar.
    If it is desktop view, nothing would happened as the element and sidebar are on top.
    But in mobile view they are not.

    I can’t add plugin shortcode as no text will appear in page. The page is as I mentioned for search purpose and it will not show any other element.
    But I can look at the code and find the ID of element I want.

    So any way to achieve auto scroll on load with this plugin regarding above?

    Reply
    • malihu
      Posted on June 7, 2018 at 21:03 Permalink

      Yes you can but you’ll need to add javascript in your theme/template. Can you do this? If yes I can provide an exact script for the ID you want to scroll to.

      Let me know

      Reply
  11. Louis-Jacob
    Posted on May 29, 2018 at 21:38 Permalink

    Hi, I was wondering if it was possible use the plugin with someting else than <a href="myAnchor">Here</a>. Would a scroll event work to trigger the plugin ?

    I’m currently using the Divi template.

    My website is a work in progress, therefore i was asking before actually trying it out.

    Thanks in advance !

    Reply
    • malihu
      Posted on May 30, 2018 at 15:04 Permalink

      Hi,

      You can trigger a scroll event programmatically (i.e. without a click action by the user) via plugin’s scrollTo method. This is done with javascript like this:

      $.mPageScroll2id("scrollTo","#my-id");

      You can see more info about the method here:
      http://manos.malihu.gr/page-scroll-to-id/#methods-section

      Not sure if this is what you need. If you could give me an example of what you want to do I might be able to help.

      Reply
  12. Alyssa Alber
    Posted on May 23, 2018 at 19:09 Permalink

    Hi!

    I’m having trouble with the scroll to id. It was not working with my website.
    Im using crexis theme. I used go buttons and linked properly. When I click the buttons it just stay where it is and the url is just changing but not scrolling to the row itself.

    Your help will be much appreciated.

    Thank you!

    Reply
  13. Erin
    Posted on May 19, 2018 at 00:35 Permalink

    Hello!

    I’m having trouble getting Page Scroll to ID to play nicely with my Acid theme. From what I can see, Acid is no longer available for download or support, so I’m kind of at your mercy. Acid should have had this scroll-to feature built into it already, but I digress.

    I notice that when I click my menu links, it no longer puts a #nameoflink at the end of the URL, so I think it’s doing *something*….just not scrolling. Or highlighting.

    Any help you can provide would be greatly appreciated.
    Info to look at site:
    ID: …
    PASS: …

    Thanks!
    Erin

    Reply
    • malihu
      Posted on May 20, 2018 at 02:45 Permalink

      Hello,

      Please check this FAQ:

      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-1

      The plugin works only with browser’s native/default scrollbar. It works strictly by scrolling the document’s root element (html/body), not overflowed div(s).

      Your site/theme uses an overflowed div with a custom js scrollbar so “Page scroll to id” cannot do its thing.

      Edit: I’ve removed the user/pass so it’s not public

      Reply
  14. Poornima
    Posted on May 17, 2018 at 11:58 Permalink

    when i scroll down with the mouse the menu is not highlighting

    Reply
    • malihu
      Posted on May 18, 2018 at 00:13 Permalink

      I can’t help unless I see your page. Can you post your URL?

      Reply
  15. S
    Posted on May 4, 2018 at 04:42 Permalink

    Like a few other folks, I’m having a tough time with the offset. It doesn’t seem to work with my theme, whether I change the offset in the main settings or add it directly to the shortcode.

    FWIW I’m using WPBakery Page Builder and have each PS2ID in its own row.

    Thanks!

    Reply
    • malihu
      Posted on May 4, 2018 at 10:39 Permalink

      Hi,

      I need to see your page in order to see what happens and help. Can you post your page/site URL?

      Reply
  16. alex
    Posted on April 21, 2018 at 17:22 Permalink

    hi, when i scroll down with the mouse the menu is not highlighting, and i follow the steps. please help

    Reply
    • alex
      Posted on April 21, 2018 at 17:29 Permalink

      nevermind..fix it 🙂

      Reply
  17. babita
    Posted on April 13, 2018 at 10:10 Permalink

    your plugin working good but i have one issue…how can i remove section id form url

    Reply
    • malihu
      Posted on April 13, 2018 at 17:51 Permalink

      FYI I can’t open your site because it’s blocked by antivirus.

      Are your links point to same-page sections or sections on different page(s)? When you click a link does the page reload? If yes, you need to set the correct URL in your links. Make sure your links URL matches exactly your site URL (www part, https etc.).

      Reply
  18. mbgrafik
    Posted on March 27, 2018 at 23:17 Permalink

    Hello!

    The plugin works fine, thx! But one issue i cannot solve: If I click 2 times on the same link or click on another link while scrolling, it ends up in a white screen… what am I doing wrong?

    Greetings!

    http://www.automower-stich.at/

    Reply
    • malihu
      Posted on March 28, 2018 at 10:17 Permalink

      Hi,

      This is an issue with your theme (if you temporarily deactivate “Page scroll to id” you’ll have the same problem).

      Your theme has a script that handles your menu links that point to same page sections. The script is:
      ...themes/engage/js/engage.main.js
      The code that does this is the function in line 445

      You can try this:

      Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option. Save changes and test your page.

      If the above doesn’t work (which is very probable by seeing your theme’s script code), then you’ll need to manually edit engage.main.js, find the line 445 and change the part:
      #main-menu li a
      to:
      #main-menu li a:not(._mPS2id-h)

      Hope this helps

      Reply
      • mbgrafik
        Posted on March 28, 2018 at 17:21 Permalink

        I’m very sorry, but it didn’t work. I tried both: “Prevent other scripts from handling plugin’s links” and changing the engage.main.js

        Any other ideas?

        Reply
        • malihu
          Posted on March 28, 2018 at 22:11 Permalink

          It works for me. I just checked your page and double-clicking the menu links (or clicking them while page is scrolling) work as expected without the white screen issue.
          Did you fixed it?

          Reply
  19. ovas
    Posted on March 24, 2018 at 22:32 Permalink

    I am doing all steps right. Plugin seems not working. Am I doing some thing wrong. please have a look on my website

    Reply
    • malihu
      Posted on March 25, 2018 at 21:23 Permalink

      I get “Sorry, you are not allowed to preview drafts.”

      Reply
  20. thomas
    Posted on March 22, 2018 at 11:15 Permalink

    hi,

    thanks for the great plugin 🙂

    is it possible to add a vertrical progress reading indicator in the widget like https://css-tricks.com/reading-position-indicator/ ?

    would be so great.

    Reply
    • malihu
      Posted on March 25, 2018 at 21:21 Permalink

      Hi,

      This is completely out of plugin’s scope.

      I could only see this as a different plugin (maybe complementary to “Page scroll to id”) but not as a “Page scroll to id” core feature, as its functionality is not related to what the plugin does.

      Reply
  21. alejandro
    Posted on March 10, 2018 at 16:52 Permalink

    is posible add the offset in the link?

    http://my-site.com/page/#some-id&offset=100

    thanks

    Reply
    • malihu
      Posted on March 11, 2018 at 19:03 Permalink

      No, not in its URL. You can only have link-specific offsets via plugin’s toolbar button and shortcode (see more info here)

      Reply
  22. Cedric
    Posted on March 9, 2018 at 03:44 Permalink

    Hi Malihu,

    I’m using your plugin and it works great, thank you.

    I have one question/issue about a behaviour with the browser url though.

    Is it possible to hide the hash value all the time? Because when I click on a menu link that opens another page, the hash value is still appended eventhough ” Append the clicked link’s hash value (e.g. #id) to browser’s URL/address bar” isn’t checked.

    Any advice?

    Reply
    • malihu
      Posted on March 9, 2018 at 13:31 Permalink

      Hello,

      There’s no option to hide the hash value when coming from a different page/URL. The appended hash value is necessary so the plugin script knows where to scroll the page (since there’s no user triggered action, like clicking a link).

      It’s usually good for the user experience to have the hash value appended in browser’s URL when changing pages (it allows the user to bookmark sections, use browser’s back button etc.)

      This said, the only way (at least for now) to hide the hash when coming from other pages is to manually edit plugin’s script and changing some code. If you want I could tell you which file and how to modify it and see if it helps.

      Reply
      • Cedric
        Posted on March 12, 2018 at 15:32 Permalink

        Hey Malihu,

        I’m definitely interested in knowing which file to modify?

        Thank you!

        Cedric

        Reply
        • malihu
          Posted on March 12, 2018 at 17:12 Permalink

          OK do the following:

          1.First, edit your wp-config.php file (in your site root directory) and add the following:

          define('PS2ID_MINIFIED_JS', false);

          more info

          This will instruct the plugin to load the non-minified scripts that you can edit. You can add the above code before the “That’s all, stop editing! Happy blogging.” comment in wp-config.php.

          2.Go to plugin directory (e.g. /wp-content/plugins/page-scroll-to-id), open the js folder and edit jquery.malihu.PageScroll2id-init.js file.

          Change line 43 from:

          var href=window.location.href.replace(/#.*$/,"#");

          to:

          var href=window.location.href.replace(/#.*$/,"");

          You can change the line above or comment-out the original and add a new one with the modified code below it.

          Remove (or comment-out like below) lines 81-85:

          /* if(window.history && window.history.replaceState){ window.history.replaceState("","",_hash); }else{ window.location.hash=_hash; } */

          That’s it. Save the file and test you page.

          Reply
          • Cedric
            Posted on March 14, 2018 at 11:00 Permalink

            It’s working like a charm. Thank you very much

        • malihu
          Posted on March 14, 2018 at 17:53 Permalink

          You’re welcome 🙂

          Please note that on the next plugin version I’ll probably add an option for this feature. So if/when you upgrade, you’ll just need to remove the constant from the wp-config.php and enable the related (new) option in plugin settings.

          Reply
  23. Richard V. Landman
    Posted on February 28, 2018 at 00:58 Permalink

    well it’s a great plugin but I am having an issue with the jumps, when click on any “#” or anchor link to jump on page. It cuts down the fist 1 and a half lines.

    Can please guide me, maybe I am doing something wrong.

    Reply
    • malihu
      Posted on February 28, 2018 at 01:25 Permalink

      I just checked your page (lookgadgets.com) and the plugin is not installed/activated.
      Not sure if this is the page/site you’re having trouble with or how can I help(?)

      Reply
    • Thabo
      Posted on March 7, 2018 at 17:20 Permalink

      SOLVED

      I heard the same issue. Try this plugin ‘iMeud’ It auto hide the header
      when scrolling. And what is amazing it re-appears again. So the user may be able to interact with sections properly.

      I think this is one of the best solution for this problem.

      Reply
  24. Alejandro
    Posted on February 27, 2018 at 04:31 Permalink

    http://lafactoria.pe/agencia-de-comunicacion/

    the plugin works well on the same page, it places some links with texts, and when you click it works correctly.

    <a href="http://lafactoria.pe/agencia-de-comunicacion/#Factoria" rel="nofollow">Que cosa es La Factoría</a> <a href="http://lafactoria.pe/agencia-de-comunicacion/#Hacemos" rel="nofollow">Que hacemos en La Factoría</a> <a href="http://lafactoria.pe/agencia-de-comunicacion/#Programas" rel="nofollow">Programas de La Factoría</a>

    But when I put the links in the main menu, the page appears as a jump and is not even framed as it should appear
    http://lafactoria.pe/agencia-de-comunicacion/#Factoria

    The link by itself from the browser works, …
    http://lafactoria.pe/agencia-de-comunicacion/#Factoria

    Might you help me?
    Thanks in advance

    Reply
  25. Diane Kelly
    Posted on February 20, 2018 at 08:25 Permalink

    Where do I insert the “rel” code if I’m using the visual composer “button” settings?
    I can only put the URL link.

    Reply
    • malihu
      Posted on February 20, 2018 at 18:06 Permalink

      If you want to enable the plugin on any link, button etc. without adding the rel or class attributes, do the following:

      Go to “Page scroll to id” settings and change “Selector(s)” option value to:

      a[href*=#]:not([href=#])

      Click save changes.

      The plugin will now be enabled on any link in your page that has a hash (#) in its URL.

      Reply
  26. Alessandro
    Posted on February 14, 2018 at 13:18 Permalink

    Hi Malihu from Italy !

    I am using your plugin in my site and it is working wery well.

    However, when I navigate the first time on home page and select the last menu tab (contatti) the window does not scroll enough and I have to click two time to set ancor correctly. This appears too when I click on the same tab menu from another page. Is there a way around this?

    Thanks in advance!
    Alessandro.

    Reply
  27. Ibraheem
    Posted on February 7, 2018 at 20:39 Permalink

    Hi Malihu from the UK!

    I am using your plugin in my site and it is working perfectly inside a page.

    However, when I navigate to my scroll id from another page (say the homepage) the window does not scroll enough. I think this is because I am using images with height set to 100vh (so the images load and re-size after the page is loaded). Is there a way around this?

    Thanks in advance!
    Ibraheem

    Reply
    • malihu
      Posted on February 8, 2018 at 14:51 Permalink

      Hello Ibraheem,

      You could try using the delay for scrolling to target on page load option to how many milliseconds after the page is fully loaded, the scrolling will take place. For example insert 500 (i.e. half a second) in delay field, save changes and test your link(s).

      The issue you describe though sounds like you’re using a lazy-load image plugin (a script that loads images as you scroll down the page). Do you use such script/plugin?

      Reply
  28. Tee
    Posted on February 1, 2018 at 20:47 Permalink

    I would like to be able to scroll between front page sections of my site using a button. So for instance. Front page one was a button on it that says Read More which would scroll me to front page 2 section. It used to work using:

    <a href="#front-page-2" rel="nofollow">Learn More</a>

    But it doesn’t work anymore.

    <a href="#text-31" rel="nofollow">Learn More</a>
    (but I don’t know how to add the button class to this.)

    Any advice?

    Reply
    • Tee
      Posted on February 1, 2018 at 20:51 Permalink

      Let me try that again! I would like to be able to scroll between front page sections of my site using a button. So for instance. Front page one was a button on it that says Read More which would scroll me to front page 2 section.

      It used to work using: <a class="button" href="#front-page-2">Learn More</a>

      So I changed it to: <a href="#text-31" class="ps2id">Learn More</a> but I don’t know how to get my button back.

      Also, there are being done through the widget section.

      Reply
      • malihu
        Posted on February 3, 2018 at 17:33 Permalink

        Change your button to include both classes:

        <a href="#text-31" class="button ps2id">Learn More</a>

        Is this what you need?

        Reply
  29. joe z
    Posted on January 23, 2018 at 20:22 Permalink

    I have a question. Can you put more then 1 selector in the offset field> for exampe: #masthead and .mob-menu together. I am using to 2 menu’s together when it goes mobile. Is that possible?

    Reply
    • malihu
      Posted on January 24, 2018 at 09:59 Permalink

      No, you cannot put 2 selectors in the “Offset” field.

      You can use plugin’s offset expressions in order to bypass the offset value in one of your menus (e.g. disable offset on mobile), but I’m not sure if this helps you.

      Reply
      • joe
        Posted on January 26, 2018 at 16:18 Permalink

        Thank you for your response. This helps. What I did was use the class and set a value of 120 in the offset. It works. thanks,

        Reply
  30. Garcia
    Posted on January 22, 2018 at 19:25 Permalink

    Hi from France Malihu !

    Thank you for this plugin really practical ! Easy to use however but i have a problem.

    I made my page with Builder SiteOrigin.

    When I click on my tabs menu I have my page scrolling on the desired section but each time it goes up the site before descending on my desired section. (always up & down grrrr…)

    And when I’m in the lower section of the page and I want to go back a section for example, it reloads the page at the top to immediately descend on the section.
    Is SiteOrigin a problem or who did something wrong?

    In the idea I will exactly like the result of your video !! : ^)

    Thank you very much for your help !!!!

    Reply
    • malihu
      Posted on January 22, 2018 at 19:41 Permalink

      Hello and thanks for your comments 🙂

      Your issue is very easy to fix.

      Your server is configured to always redirect to the www subdomain. So when you go to your-site.com/some-page/ it automatically redirects to www.your-site.com/some-page/.

      Your links URL do not have the www part. That’s why when you click a link the page reloads (seems to go up before scrolling), instead of just scrolling to the section.

      You just need to add the www part in your links. For example, change “Accueil” URL from:

      http://sebgarciaportfolio.com/#accueil

      to:

      http://www.sebgarciaportfolio.com/#accueil

      and it’ll work 😉

      Reply
      • Garcia
        Posted on January 22, 2018 at 19:59 Permalink

        Simple, fast, effective, just perfect !

        I am a beginner, I would probably need your help again for other settings such as the tab highlighted! 😀

        Thank you very much !

        Reply

Comments pages: 1 5 6 7 8 9 10

Post a comment

Cancel reply

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