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 4 5 6 7 8 10

  1. Sharjeel
    Posted on January 15, 2018 at 16:37 Permalink

    Hello, I need help cause in my case I don’t find scrolling smoothly. When I click our service submenu and when it’s scrolling then it does not feel smooth it looks like the hitch. Please guide me how can I make this smoothly. Thanks

    Reply
    • malihu
      Posted on January 17, 2018 at 02:32 Permalink

      Hi,

      I checked your page and it does not use “Page scroll to id” plugin, so I don’t know how to help(?)

      Reply
  2. Matt MacDonald
    Posted on November 29, 2017 at 17:34 Permalink

    Hi there, I’ve got the page scrolling from the menu bar links to down on the page just fine… the menu bar floats, and when I click “home” from further down the page, it doesn’t scroll up, it goes to the top of the page and makes a slight down scroll movement. Is it possible to scroll back up from a lower position to the top so it looks fluid?

    Thanks

    Reply
    • Matt MacDonald
      Posted on November 29, 2017 at 17:40 Permalink

      Nevermind, it’s working now!

      Reply
  3. Tomasz
    Posted on November 23, 2017 at 14:58 Permalink

    Hello,

    Could You help me with adding the blog page in the menu to scroll?
    on my website the blog page is news

    Thank You in advance

    Reply
    • malihu
      Posted on November 23, 2017 at 16:16 Permalink

      Hi,

      Your “News” section has the id panel3, so you can create a custom link in your menu with URL:

      #panel3

      This link will scroll to the news section (including the section large image).

      Reply
      • Tomasz
        Posted on November 23, 2017 at 16:40 Permalink

        Thank You for Your quick answer.
        Is it possible to make it to scroll a little bit lower to the nwes not to the photo?
        If i will change in offset it will change in all pages but i only want to change it in News section.

        Could You tell me, do You know how to change the backgrounf color in menu in mobile version?
        Thank You in advance

        Reply
        • malihu
          Posted on November 23, 2017 at 18:11 Permalink

          You will need to add an id target on the “NEWS” title element but I’m not sure if your theme provides a way to do this without editing your template.

          Personally, I would just remove the news section heading image as it doesn’t add anything important to the user.

          To change the menu style for the mobile, you could add something like the following CSS:

          @media screen and (max-width: 48em){ .navigation-top, .main-navigation ul{ background: #ddd; color: #000; } }

          Reply
          • Tomasz
            Posted on November 23, 2017 at 19:43 Permalink

            Thank You for Your help,
            i have deleted the photo You are right that this is not neccessary.
            Thank You for the background color help.

            Best regards and have a nice evening

          • Tomasz
            Posted on November 23, 2017 at 19:47 Permalink

            One more question,
            What should i add to css to change the highlight when i am on for example contact?

        • malihu
          Posted on November 24, 2017 at 00:54 Permalink

          You’re welcome.

          To highlight your menu links, you can use something like:

          .navigation-top .current-menu-item > a.mPS2id-highlight, .navigation-top .current_page_item > a.mPS2id-highlight { color: yellow; }

          See more info about the highlight classes here.

          Reply
  4. Jacob
    Posted on November 16, 2017 at 00:41 Permalink

    “Insert Page scroll to id target” button is not showing on mine.

    I already downloaded and activated the plugin.

    I’m at the “edit page” and it seems “Insert Page scroll to id target” button needs to be next to the “toolbar toggle” button, but I don’t see it.

    How can I make it be shown?

    Reply
    • malihu
      Posted on November 16, 2017 at 05:05 Permalink

      Do you use a page builder plugin or tinymce advanced?

      Reply
      • Kate
        Posted on November 24, 2017 at 17:19 Permalink

        I have the same problem and I use page builder i tinymce. What can I do?

        Reply
        • malihu
          Posted on November 24, 2017 at 19:10 Permalink
          • Kate
            Posted on November 27, 2017 at 11:36 Permalink

            hmm I tried this option but still it doesn’t work. I’m not sure that I put shortcodes at good place. do you have any video tutiorial or tutorial step by step how can I do this?

        • malihu
          Posted on November 27, 2017 at 18:41 Permalink

          WordPress shortcodes are inserted inside the content editor (any content editor you use, e.g. page builder text block, native wp visual editor etc.).

          An alternative is to enable the plugin to handle all in-page links in your theme and content.

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

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

          and save changes.

          If you do this, the plugin will handle any link with a hash (.i.e. #) in its URL, so you can insert standard/normal links in your editor without the need to use “Page scroll to id” buttons or shortcodes.

          Reply
          • Kate
            Posted on November 28, 2017 at 12:24 Permalink

            It’s work! thank you so much! 🙂

  5. Valentina
    Posted on November 15, 2017 at 18:20 Permalink

    Hello,

    i have installed your Plugin on my page and i did everything right with the custom links in the menu as subitems.

    It works perfect on one site, the slide was perfect and smooth but then i wanted to do the same again on another site and i did everything exact the same way but now it don’t scroll to this id it just jumped.

    I don’t know what i did different or wrong. I really tried to do exactly the same.

    my website is http://bimpro.eu
    where it works perfectly: http://bimpro.eu/bimpro/
    and where it don’t works for example: http://bimpro.eu/bim/

    i hope you can help me and thank you 🙂

    Reply
    • malihu
      Posted on November 15, 2017 at 22:45 Permalink

      Hi,

      The plugin is not enabled on your menu links. This probably happens because the theme prevents “Page scroll to id” from being enabled on the menu items automatically.

      The links at bimpro.eu/bimpro/ scroll the page via another script that for some reason it doesn’t apply on bimpro.eu/bim/

      The easiest solution is to enable “Page scroll to id” on your links manually.
      Got to plugin settings and change “Selector(s)” option value to:

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

      Save changes and test your pages 😉

      Reply
  6. Bjoern
    Posted on November 14, 2017 at 18:50 Permalink

    Hi,

    I´m having trouble “anchoring” the elements to a menu in a theme since the existing anchors have no name, only ´#´. Can you give me a hint or pointers as how I´m able to use the plugin to create the menu from these anchors?

    Thanks and Regards,

    Bjoern

    Reply
    • malihu
      Posted on November 14, 2017 at 21:05 Permalink

      Hello,

      You will not be able to use the plugin (or any similar plugin) with the way your theme works.

      Your theme does not scroll the actual document. It has an internal js script that switches between the sections with a custom javascript function (that’s why there are no id attributes). It basically changes the sections top position programmatically (i.e. it does not scroll the page).

      Even without “Page scroll to id”, you cannot “jump” to any id target because the page has no scrollbar and all sections have the same height as the viewport (i.e. there’s nowhere to scroll to).

      You should probably contact the theme developer and ask if there’s a way to do what you describe. The only other solution is to write your own custom javascript (on top of the theme’s function).

      Reply
  7. Benjamin
    Posted on November 11, 2017 at 04:46 Permalink

    Hi there. Thanks for making such a great plugin!

    Just wanted to ask about allowing the plugin to work on a pre-made button. I am trying to get the “FIND OUT MORE” button on my home page to scroll down but everytime I click it, it scrolls down and then refreshes the page.

    The button was created using Page Builder by SiteOrigin Plugin with SiteOrigin Widgets Bundle. I have added in the rel=m_PageScroll2id to the button through the Page Builder interface

    If I untick the “Prevent other scripts from handling plugin’s links (if possible)” option, the button will just jump to the id instead.

    Reply
    • malihu
      Posted on November 11, 2017 at 06:23 Permalink

      Hello,

      The plugin works fine on the button. The problem is the link of the slide, which is added on the parent li element.

      The script that’s adding the slide link is:
      ...plugins/so-widgets-bundle/js/slider/jquery.slider.min.js

      When you click anywhere inside the “Giving Hope…” slide, the above script reloads the page.

      Have you added a link on this slide? Can you remove it?

      Reply
      • Benjamin
        Posted on November 12, 2017 at 15:53 Permalink

        Just removed it and it totally fixed the problem! Thank you so much! Would have never realised it without you.

        Just wanted to add. I can’t seem to get the button working if i use the method that is suppose to work for external links. When i try adding
        a[href*=#]:not([href=#])
        or
        a[href=’#mission’]
        into the selectors field it doesn’t seem to work for that same button. That is why i had to get the button working by adding the rel into it.

        Was just wondering if it was something i was doing wrong or if it is an issue with the javascript (maybe?)

        Reply
        • malihu
          Posted on November 12, 2017 at 16:10 Permalink

          It should definitely work.
          Can you try it again?

          a)Remove the rel value
          b)Go to plugin settings and change “Selector(s)” option to:

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

          Save changes and test the page.

          Let me know when you do so I can check it

          Reply
  8. Naveen
    Posted on November 7, 2017 at 05:07 Permalink

    Hi Thanks for this plugin, I have small problem with this one : If my target is another page custom menu link.
    Example :- http://localhost/wordpress/en/#News,
    and now i’m in http://localhost/wordpress/page. i want to go home page #News section but link showing http://localhost/wordpress/page/#News. it’s not moving to #News section.
    thanks

    Reply
    • malihu
      Posted on November 7, 2017 at 05:30 Permalink

      Hi,

      Your link’s URL should be the full address (not just the target id). For example, the link’s URL should be:

      http://localhost/wordpress/en/#News

      more info

      Is this what you need?

      Reply
      • Naveen
        Posted on November 7, 2017 at 06:10 Permalink

        Yes thank you, If i mentioned like this my
        function special_nav_class ($classes, $item) have issue the active class applying for custom links.

        Reply
  9. Ev Malcolm
    Posted on November 3, 2017 at 05:23 Permalink

    Hi there,

    I’ve managed to get the scrolling hashtags and offset and speed to work correctly, but I think I’m messing up the menus — whenever I click a menu item, it re-loads the page and scrolls down to the section from the top, instead of scrolling up or down to the selected section from the section I’m on.

    The written instructions say to include the “page” in the Custom Link creation, but the video tutorial doesn’t seem to do that. When I don’t include the page name, the scrolling doesn’t work at all and clicking the links just jumps directly to the section.

    Any insight is appreciated,
    Thanks.

    Reply
    • malihu
      Posted on November 3, 2017 at 16:29 Permalink

      Hi,

      Your menu links URL do not seem to be correct. There’s no Home path in your server. Your page URL is americanaccesscontrols.com/wp/ but your links URL is americanaccesscontrols.com/wp/Home/. There’s no Home page in your site, so remove it from the URL.
      So for example, change “Products” link from:
      /wp/Home/#products
      to:
      /wp/#products

      Also, your theme’s menu prevents “Page scroll to id” from being auto-enabled on its links, so you need to do it manually – see here.

      If you do the above, everything will work with or without the page name in your links URL.

      Hope this helps

      Reply
  10. Juliana
    Posted on October 20, 2017 at 21:20 Permalink

    Hi, your plugin it’s amazing. Thanks.
    I have a little problem, because everytime that i click on a button, the page goes to top and after this goes to my section.
    I saw in your exemple, the other way, without this.
    How can i do to have like your exemple?

    Reply
    • malihu
      Posted on October 22, 2017 at 19:52 Permalink

      I need to see your page in order to help. Can you post your URL?

      Reply
  11. David
    Posted on October 20, 2017 at 15:13 Permalink

    Firstly great plugin Malihu. Gladly donated to reward your skills!

    However, i’m having a few problems getting it to work correctly. I read through a lot of comments to try and find someone with a similar problem but…
    
I’m using the plugin in a menu and also as image links within each section of the page. I get the same problem with both implementations, ie it doesn’t arrive at the start of each section (which starts with a header title). Have used various approaches to try and solve the issue; Link offsets in px values, offset with the menu id, adding stuff to the selector field…etc etc.



    As the sections on this scrolling page are classes rather than id’s it’s not possible to target the wrapper that defines each section. ( i believe). Is there any way i can get the plugin to function correctly in this scenario? Or is it a problem with the way my theme (menu) is implemented.

    Thanks in advance for any help you can provide.
David

    Reply
    • malihu
      Posted on October 20, 2017 at 16:09 Permalink

      Hello,

      I just checked your page. Your id targets are correctly set (no need to change them). Your off-menu links (e.g. the arrow image links) are handled by another script in your theme (...themes/hatch/highgrade/js/app.js). That’s why offset doesn’t work (the theme script overwrites “Page scroll to id”).

      Solution

      Go to “Page scroll to id” settings and:

      1. Set the “Offset” value to:

      #hgr_top_navbar_container

      That’s your theme’s header id.

      2. Enable/check “Prevent other scripts from handling plugin’s links” option under “Advanced options”.

      Save changes and test your links. Everything should be working as expected.
      Let me know

      Reply
      • David
        Posted on October 20, 2017 at 18:56 Permalink

        The main nav works great now. Thanks for your speedy response 🙂
        The arrow image links —while working better than before— still only arrive at the first text rather than the beginning of the section even after adding some offset values. (‘test link’ on page). Is this because of the underlying theme app.js file that you mention? If so i’m going to see if i can disable it someway.
        Thanks again. Keep up the good work.

        Reply
        • malihu
          Posted on October 22, 2017 at 19:50 Permalink

          Yes, it’s because of the app.js theme file.

          Since “Prevent other scripts from handling plugin’s links” option cannot remove the app.js events automatically, you’ll have to do it manually.

          Edit ...themes/hatch/highgrade/js/app.js file and find line 99 (right below the “Scroll nav outside the menu, ex. buttons” comment). Change this line from:

          jQuery("a[href*='#']:not(ul.main_navbar li.menu-item a[href*='#'], a.back-to-top, a.close-btn, a.fssearch, a.cd-primary-nav-trigger, a.vc_pagination-trigger, .hgracc-title a)").on( "click", function(){

          to:

          jQuery("a[href*='#']:not(ul.main_navbar li.menu-item a[href*='#'], a._ps2id, a.back-to-top, a.close-btn, a.fssearch, a.cd-primary-nav-trigger, a.vc_pagination-trigger, .hgracc-title a)").on( "click", function(){

          This will prevent app.js from handling “Page scroll to id” links (i.e. links with _ps2id class ).

          Save the file and test your links again.

          Reply
          • David
            Posted on November 30, 2017 at 14:38 Permalink

            Hello again.
            Took your advice and edited the .js file.
            It works better but currently it’s not quite getting the amount of scroll right. The page sections are slightly incorrectly offset even after allowing for the sticky menu.
            Any suggestions?
            Thanks again.

        • malihu
          Posted on December 1, 2017 at 08:50 Permalink

          The scroll position seems to differ because the sections have different top padding. For example, “NOTRE VISION” section has 75px padding while “LE PRINCIPE” has 35px.

          You also have id targets within content (e.g. in “LE PRINCIPE”) and id targets on the sections themself (e.g. “NOTRE VISION”).

          You should add the target id on each section (like in “NOTRE VISION”) and each section top padding should normally be the same.

          Hope this helps

          Reply
  12. Whitney
    Posted on October 12, 2017 at 20:14 Permalink

    Hi Malihu,

    Love the plugin! It works great on the mobile menu but I’m having an issue with the sticky nav. When I click on a link in the primary navigation, the page scrolls down but none of the links on the sticky nav get highlighted.

    I have tried
    Changing the “Selector(s)” field to:
    a[rel=’m_PageScroll2id’], .menu-item a[href*=’#’]
    a[rel=’m_PageScroll2id’], #primary-menu a[href*=’#’]

    Adding “ps2id” class to the link

    I think the mobile menu is not allowing the sticky menu to work.
    Any help would be greatly appreciated!

    – Whitney
    http://www.modernhustledesign.co

    Reply
    • malihu
      Posted on October 13, 2017 at 07:55 Permalink

      Hello Whitney,

      This happens because you have the option “Allow only one highlighted element at a time” enabled. You’ll need to uncheck/disable this as it restricts highlighting only on one link (in your case the mobile menu one and not the desktop one).

      In addition, from viewing your page’s HTML, it seems that you don’t need to create the targets elements:
      PORTFOLIO
      ABOUT
      SERVICES
      CONTACT
      as your theme already have these target id attributes set.

      This means that you also don’t need the option “Keep the current element highlighted until the next one comes into view” checked.

      Hope this helps

      Reply
      • Whitney
        Posted on October 18, 2017 at 00:11 Permalink

        Works perfect! Thanks so much.

        Reply
  13. Fauret
    Posted on October 8, 2017 at 16:30 Permalink

    Hi,
    In post visual editor, the toolbar button “Insert Page scroll to id target” do not appear.
    The extension is install.
    Regards

    Reply
  14. Su
    Posted on September 27, 2017 at 14:42 Permalink

    Hi Malihu-

    I’ve tried every way (or I think I did) to enable the plugin on my menu links. It is still jumping instead of smooth scrolling.

    Things I tried:
    – Adding a[rel=’m_PageScroll2id’], .menu-item a[href*=’#’] to Selector(s)
    – Adding ps2id to CSS classes in Appearance>Menu
    – Enable the “Prevent other scripts from handling plugin links”

    Also, I’m not sure if the selector for offset is correct. I used .menu-scroll-page-menu. Is it correct?

    Thank you for your help in advance!

    Reply
    • malihu
      Posted on September 27, 2017 at 16:03 Permalink

      Hello,

      1. Your offset selector is correct.

      2. Your theme seems to be doing its own thing for generating the menu(s). Specifically:

      a) It adds the ps2id class on the “wrong” element. It doesn’t add the class on the link. It adds it on an inner i element. This is why the 2nd thing you tried didn’t work.

      b) The theme does not use the standard menu-item class. It only uses the current class and the menu-item-id class. That’s why the 1st thing you tried didn’t work.

      Basically, you did everything right but the theme kept fighting you back 🙂

      Solution

      1. Remove the ps2id class from the menu items (in Appearance -> Menu) as it’s not needed.

      2. Go to plugin settings and change the “Selector(s)” to:

      a[rel='m_PageScroll2id'], #nav-main a[href*='#']

      Save changes and test your page. Everything should be working.

      Let me know

      Reply
      • Su
        Posted on September 27, 2017 at 22:21 Permalink

        Yes, that works amazing! Thank you so much Malihu.

        Reply
  15. Tariq
    Posted on September 13, 2017 at 10:24 Permalink

    Hello,

    I have a multiple pages website, I am using visual composer to edit my pages,

    the deal is i want to use page scroll id plugin for one single page & i dont want to use it in the menu instead i want to use it in the buttons on that page

    is there a way to do it

    Please help

    Thanks in Advance

    Reply
    • malihu
      Posted on September 15, 2017 at 01:21 Permalink

      Visual composer allows you to enter an id on any composing block/element you choose (visual composer has an id field for almost all elements).

      You can then enable “Page scroll to id” to handle any kind of link by adding:
      a[href*=#]:not([href=#])
      to “Selector(s)” field in plugin settings. See here for more info.

      Reply
  16. Murali
    Posted on August 31, 2017 at 17:37 Permalink

    Hello, friend, your tutorial helps a lot two days onwards my mind is blowing. Thanks a lot.

    Reply
  17. John Merlo
    Posted on August 2, 2017 at 04:52 Permalink

    On the home page of http://www.airpurifiercritic.com/ I have this at the top [ps2id id=’some-id’ target=”/] and this at the bottom Back to Top it is not going to the top of the page what am I doing wrong?

    Reply
  18. walter
    Posted on July 25, 2017 at 01:05 Permalink

    Hello, I have a button in a slider. I installed the plugin and created the anchor ID but the action jumps.
    This is the code in the slider:

    [tx_vslider height=”100″ reduct=”130″ vurl=”https://www.youtube.com/watch?v=oUUvK9WUves&feature=youtu.be” overlay=”vignette” bgurl=”http://lacasadecarton.edu.pe/prev/wp-content/uploads/2017/06/slide04.jpg” attachment=”fixed” bgsize=”cover” imgurl=”http://lacasadecarton.edu.pe/prev/wp-content/uploads/2017/06/3.png” title=”” linktext=”” linkurl=”#1984″]Formamos personas solidarias, buscadoras de verdad, libres y creativas para una sociedad democrática y un mundo ecológicamente viable.[/tx_vslider]

    and this is the CSS for the button:

    .vslider_button, .vslider_button:visited {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    padding: 0px 48px;
    color: #FFF;
    text-transform: uppercase;
    background-color: #333;
    opacity: 0.8;
    text-decoration: none;
    font-family:FontAwesome;
    font-size:40px;
    }

    What is worng?

    Thanks for your time!

    Reply
    • malihu
      Posted on July 25, 2017 at 02:44 Permalink

      I saw that you fixed the issue by adding the global selector a[href*=#] in “Selector(s)”, correct?

      Reply
      • walter
        Posted on July 25, 2017 at 22:44 Permalink

        Yes my friend, finally I found the solution in an old response of yours! Thanks for your time.

        Reply
  19. Georgia
    Posted on July 22, 2017 at 18:53 Permalink

    Hallo I use page scroll to id plugin for wordpress but I have a multilanguage site and I can not change the title of the section to the second language. Is there another way to fix this with costum code? Thank you

    Reply
    • malihu
      Posted on July 23, 2017 at 02:08 Permalink

      Hello,

      I’m not sure how you translate posts(?) What multilingual plugin are you using and how you create the targets?

      Reply
  20. victor
    Posted on July 14, 2017 at 10:34 Permalink

    Hi there.

    Thanks a lot for this plugin.

    I wonder if is normal page reloads before scroll to section. I didn’t saw that in your video tutorial.

    Do you know what could be the problem? Can you help me?

    Thanks in advance.

    Regards.

    Reply
    • victor
      Posted on July 14, 2017 at 10:54 Permalink

      Edited:

      I changed the “Selector(s)” field to:

      a[rel=’m_PageScroll2id’], .menu-item a[href*=’#’]

      but it is the same.

      I put class ps2id in “CSS Classes” field at menu but no way.

      I tried the option “Prevent other scripts from handling plugin’s links (if possible)” but it seems the same.

      Any ideas?

      Thanks.

      Reply
      • malihu
        Posted on July 14, 2017 at 11:56 Permalink

        Make sure your links URL matches exactly the URL you see in browser’s address bar (e.g. missing the www part or having https).

        Reply
        • victor
          Posted on July 17, 2017 at 20:12 Permalink

          Hi malihu

          Yep, it works! Thanks for your quickly answer!

          Regards

          Reply
  21. Hitmilk
    Posted on June 30, 2017 at 20:10 Permalink

    Hej Malihu!
    Glad that i found your plugin – looks like it’s what i’m looking for a long time.
    But – like often, it won’t work like i really want – don’t know if i’m wrong with my work.
    Would be great if you could have look here: http://www.faktoffice.com (pw: 1234)

    Shortly said: we got five pages – and want to use the horizontal slide effect between the menu-points, that the page feels like “one big canvas”. Would be great if you could have look.
    Maybe deeper in the backend (if you want), i really like to donate for your plugin, if it works – because we appreciate a lot.

    Best from Berlin,
    Hitmilk

    Reply
    • malihu
      Posted on July 1, 2017 at 01:58 Permalink

      Hello Hitmilk,

      The “Page layout” option does not transform your theme’s templates layout. In other words, it won’t change your theme/page design from (the standard) vertical to horizontal.

      This option simply informs plugin’s script that you want to scroll in a specific direction (vertical, horizontal or both).

      Your theme’s layout is currently vertical. You’ll need to either get a horizontal layout theme or create one manually (via CSS). You could use the markup and CSS of the horizontal demo as a basis if you want.

      Hope this clarifies what the option does.
      I don’t think you’ll be able to find a plugin that turns vertical themes to horizontal, as such layouts are completely depended on theme’s markup, CSS and the content itself.

      Reply
  22. Bree
    Posted on June 26, 2017 at 17:42 Permalink

    Hi,

    I’ve tried configuring your plugin but it doesn’t seem to be scrolling at all. I’ve tried using the link attribute ‘m_PageScroll2id’ but it just keeps jumping.

    I’m trying to get it to scroll to the bottom when you click on ‘contact us’ on the top nav. There is an ID of #enquire in that section. Are you able to tell me if there’s anything wrong?

    Thanks

    Reply
    • malihu
      Posted on July 1, 2017 at 01:47 Permalink

      Hello,

      The plugin does not seem to be activated in your theme (plugin’s frontend scripts are not included in your HTML).
      Is the plugin activated?
      Does your theme have wp_head() and wp_footer() functions? These functions are required for the plugin to work (in fact, most plugins won’t work without them).

      Reply
  23. Andreas
    Posted on June 21, 2017 at 15:04 Permalink

    Hi,

    I’m trying to change the menu item text colour on scroll instead of highlighting the whole item using your plugin.

    i added the bellow css code to my style.css
    i have set ps2id at the menu item classes

    background: yellow; => works fine
    color: red; => not working

    a.mPS2id-highlight{
    color: red;
    background: yellow;
    }

    Any help would be appreciated.

    Regards,

    Andreas

    Reply
    • malihu
      Posted on June 22, 2017 at 00:10 Permalink

      Another CSS rule from your theme’s stylesheet is probably overwrites the a.mPS2id-highlight color rule you’ve set.

      You should try making your CSS selector more specific (e.g. .menu-item a.mPS2id-highlight is more specific than the one you’ve set). You can read about cascading order and inheritance in CSS here if you want.

      It’s impossible for me to know what selector to put as I don’t have your site URL in order to check it via browser’s developer tools. If you can post your site link, I’d be happy to help.

      Reply
  24. Kristine Silverstein
    Posted on June 21, 2017 at 07:10 Permalink

    Hello!

    This used to work perfectly for my site, but suddenly it has quit working and I cannot figure out why.

    Example: My page won’t scroll to the link below.
    http://www.hillcountryclassicaustin.org/new/#home-section-3 (“Sponsor” in the navigation menu)

    Please advise.

    Thanks so much!
    Kristine

    Reply
    • malihu
      Posted on June 21, 2017 at 08:19 Permalink

      Hi,

      It’s not “Page scroll to id”. Have you installed any new plugin(s)?

      I opened your site with Chrome developer tools and I get console errors coming from the following script (i.e. “J Shortcodes” plugin):
      http://www.hillcountryclassicaustin.org/new/wp-content/plugins/j-shortcodes/galleryview/js/jquery.easing.1.3.js

      The “J Shortcodes” plugin produces js errors that prevent other code from working. I don’t think you should use this plugin. It was last updated 4 years ago!

      Reply
  25. rakesh
    Posted on June 12, 2017 at 23:20 Permalink

    Hi sir !

    Great work i am using your plugin for shadow wordpress theme

    1)it scroll on same page to section id’s but i am not able to Scrolling from/to different pages

    2) we are using sticky header

    Please help help us sir

    thanks

    Reply
  26. khaled mamdouh
    Posted on June 10, 2017 at 01:53 Permalink

    Thanks bro 😉

    Reply
  27. Suresh
    Posted on June 5, 2017 at 08:12 Permalink

    My blog is a list of events for the month. I would like to scroll to the current date inside the document automatically on load.

    Is this possible?

    Reply
    • malihu
      Posted on June 5, 2017 at 22:05 Permalink

      This cannot be done automatically. The plugin has the ability to scroll programmatically but you’d need to develop a custom js script and call plugin’s scrollTo method on the id of the current date event. You’d need a web developer to do this.

      Reply
  28. Martin
    Posted on June 4, 2017 at 00:30 Permalink

    Hello Sir! I love your plugin! Thanks so much for it! Quick question though. If I add menu item that points to, for example #portfolio it does not scroll, it jumps, when I put in the whole site name+#portfolio it reloads the page and then scrolls smoothly. Is there any way to make it work so it scroll without reloading the website?

    My website would be: http://www.jagnaniedzielska.pl (actually its my girlfriends site)

    Thanks so much! Any help would be appreciated!

    Reply
    • malihu
      Posted on June 5, 2017 at 21:52 Permalink

      The plugin is not enabled on your menu links. See the following FAQ for more info and why this happens:
      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/2/#faq-14

      The easiest way to enable it is to go to plugin settings and change the “Selector(s)” field to:
      a[rel='m_PageScroll2id'], .menu-item a[href*='#']
      Click “Save Changes” and test 😉

      Reply
  29. Tamil
    Posted on June 2, 2017 at 12:57 Permalink

    Hi , thanks for your great plugin, but when i install it , i cant able to see the options in the editor to insert the code

    Reply
    • malihu
      Posted on June 2, 2017 at 14:56 Permalink

      Hi,

      Do you mean you can’t see the plugin’s insert link/target buttons in WordPress post/page editor?

      If yes, you’re probably using a site builder like “Siteorigin page builder”(?) Some builders do not allow custom buttons in the editor’s toolbar.

      You can always use plugin’s shortcodes though. See here:
      http://manos.malihu.gr/page-scroll-to-id-for-wordpress/#plugin-shortcodes

      Reply
  30. Christopher
    Posted on May 19, 2017 at 20:39 Permalink

    Hi there –

    I have implemented your great plugin on my site, and it seems to be working selectively. I have coded the links the same way on my site, yet only half function.

    When selecting a location (Atlantic, Western, Ontario, Quebec) – the anchor just jumps to it’s location. However, when you press Back to Top, it scrolls perfectly.

    Any idea on the issue at hand? Thanks in advance.

    Reply
    • malihu
      Posted on May 19, 2017 at 20:50 Permalink

      Hello,

      Your target elements (for “ATLANTIC”, “QUEBEC” etc.) do not have id attributes. The elements use the (deprecated) name attribute which will not work with “Page scroll to id”. You need to change the name to id attribute or create the targets via plugin’s button/shortcode.

      Reply
      • Christopher
        Posted on May 19, 2017 at 22:06 Permalink

        Wow – thanks for catching that. I’m not even sure how the name tag was used.

        Works great now. Thanks for the prompt reply, and solution. I’ve been starting at a screen for too long!

        Cheers.

        Reply
        • malihu
          Posted on May 20, 2017 at 01:44 Permalink

          You’re welcome 🙂

          Reply

Comments pages: 1 4 5 6 7 8 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