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.

Creating id targets

Creating id targets in post visual 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

Divi WordPress Theme

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).

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


506 Comments

Post a comment

Comments pages: 1 2 3 4 5 6

  1. Kyle
    Posted on May 15, 2016 at 00:39 Permalink

    hi.

    I love your plugin. The menus work great.

    I’m trying to make it work with buttons. i’m using page builder in the sydney theme and can’t use css. there’s no option to add a real attribute. i’m assuming to make the buttons scroll instead of jump i need to use a selector. i’m not exactly sure what to put, or where to put it. can you help me out?

    e.g. i’d like the “OUR SERVICES” button to scroll instead of jump to the services section.

    my website is mynextimages.com

    any help would be much appreciated. thanks.

    Reply
    • malihu
      Posted on May 16, 2016 at 16:14 Permalink

      Hi,

      The easiest way would be to enable the plugin on all links containing a hash (#) in their URL/href attribute. To do this, go to plugin settings and change “Selector(s)” field to:
      a[rel='m_PageScroll2id'], a[href*='#']

      This way you don’t need to add or change any attributes.

      Reply
  2. Patricia
    Posted on May 12, 2016 at 14:20 Permalink

    Hi there!

    I need you help. I have created an accordion with many items. what I need is to active from a different module bottoms linking to the different accordion items.

    I have tried the “target bottom” but it does not work. I must doing something wrong

    I hope you can understand my question and help me.
    Patricia

    Reply
    • malihu
      Posted on May 12, 2016 at 14:44 Permalink

      Hi Patricia,

      It would be better if you could send me your link in order to understand the issue and try to provide a solution. Is this possible?

      Reply
      • Patricia
        Posted on May 12, 2016 at 15:39 Permalink

        Hi Malihu!
        Thanks for the answer.

        The web is this
        http://www.salvaescalerasvalencia.es/elevadores-acuaticos-serie-aquadive

        What I want is, the bottom “Más información” in the image slider link to the accordion items below
        Thanks a lot!
        Patricia

        Reply
        • malihu
          Posted on May 13, 2016 at 04:27 Permalink

          For each position you want the page to scroll to (when clicking a link with hash+id), you need to create a target element.

          So in your case, if you want the page to be scrolled on the position where accordion items begin, you need to create a target element right above the accordions.
          I don’t know how you added the accordions but in the wp editor you can insert:
          [ps2id id='accordions-section'/]
          to create a (hidden) target element with the id “accordions-section”.

          Then, you’d have to change the “Más información” link URL to:
          #accordions-section
          and give the link the class “ps2id”. If for some reason you cannot give extra classes to “Más información” link, you can add its selector in “Selector(s)” field in plugin settings:
          a[rel='m_PageScroll2id'], .et_pb_more_button[href*='#']

          If you want a more advanced functionality like each “Más información” link in the slider to scroll to different accordions, you’d have to create different target elements above each accordion item.

          You could go even further and toggle accordions after the page has scrolled to their position but this would require an extra custom script in your template.

          Reply
  3. Antonis Iliadis
    Posted on May 10, 2016 at 15:18 Permalink

    Hello Malihu,

    Perfect job bro… Everything works well … I only have one Issue and I would like to ask you:

    I have many six menu items in my website. Only one menu Item I wanted to scroll in the frontpage …. I did it that according to your instructions. But I have an issue when I want to navigate from another menu item ex. Contact and Click on the “Scroll Down” Menu there is no respond.

    Better with examples | This is the website:

    http://www.xscapereality.com/

    When you click on Book Now everything is Great from the homepage. If you are in News / Blog or in Franchise etc and you Click on Book Now there is no respond ( http://www.xscapereality.com/news-blog/#loc ). Is it a way when you are in another menu – Not in Frontpage! to Send in another link ex. here: http://www.xscapereality.com/loc/ ?

    Great Job !! 🙂

    Thank you Sir,

    Yours Sincerely,

    Reply
    • malihu
      Posted on May 10, 2016 at 21:56 Permalink

      Hello Antoni and thanks for your comments 🙂

      In order to make your link(s) work from/to different pages/URLs, you simply need to insert the full address in the link’s href/URL.
      For example in your page, change “Book Now” link URL from:
      #loc
      to:
      http://www.xscapereality.com/#loc
      and everything will work.

      In HTML, when you set a link’s href attribute to just hash+value (e.g. #loc) the actual link address becomes: current page URL+hash+value, so you just need to give it the full/absolute URL you want to in order to work from any page.

      For more info and for making page scrolling work from/to different pages check sections “Making your links work from other/different pages” and “Scrolling on page load” on the guide above.

      Reply
      • Antonis Iliadis
        Posted on May 16, 2016 at 16:41 Permalink

        Thanks mate for your quick respond…

        I will try according to your instructions and I will let you know about it..

        Thank you,

        Yours Sincerely,

        Reply
        • Antonis Iliadis
          Posted on May 17, 2016 at 15:37 Permalink

          Thank you Sir,

          Everything works perfect… Amazing Operation!

          *** If you can, only delete the backlink ( XscapeReality ) but keep the address for the help of other people!

          Thank you again,

          Yours Sincerely,

          Reply
          • malihu
            Posted on May 17, 2016 at 18:22 Permalink

            Done. Glad I could help 🙂

  4. Dustin
    Posted on May 4, 2016 at 20:24 Permalink

    I am trying to insert a page scroll to id on a page other than my home page.

    I first opened the page editor and went toe the Text editing portion of the page. I created the target as:

    What are sessions like?

    I then went back to the visual tab of the editor. I highlighted the text I want the visitor to click on “What are sessions like?” and then clicked the “page scroll to id target button”. When the dialogue box popped up I entered in “section-1” in the id box. I left the “highlight target selector box empty”. I then clicked on.

    Now when I am returned to the visual editor I see “[ps2id id=’section-1′ target=”/]” in place of where I originally typed “What are sessions like?” as the words I want the visitor to click on.

    I then hit publish. When I view the page nothing is there for me to click on. Where did I make a mistake. Thanks for your help.

    Reply
    • malihu
      Posted on May 5, 2016 at 19:56 Permalink

      Hello,

      To create the link, click in the editor where you want the link to appear (no text selection!), click on “Insert Page scroll to id link” button and enter the URL/id (e.g. #section-1), the Link Text (e.g. What are sessions like?) and optionally, the offset you want.

      To create the target (the place where page will scroll to), click in the editor where you want the target to be, click on “Insert Page scroll to id target” button and enter the id (e.g. section-1).

      Note that currently, in plugin version 1.6.1, the two visual editor buttons are very basic, meaning that text selection (among others) won’t work when creating links. This is going to change in version 1.6.2 which will have much more advanced and feature-rich buttons.

      Let me know if you need more help

      Reply
  5. mohamed
    Posted on April 25, 2016 at 22:57 Permalink

    i used this plugin to make my website navigate vertically but when i press the menu button to navigate to other page section , it navigates but with page loading , how to fix that

    Reply
    • malihu
      Posted on April 26, 2016 at 00:35 Permalink

      I need more info in order to help. Can you post your link or code? For example, what’s your link’s URL and what’s the page address?

      Reply
  6. Karim
    Posted on April 19, 2016 at 14:34 Permalink

    Hello,

    Thanks for the awesome plugin. This is my third website i use it on, but somehow on this site i dont manage to make it scroll to exactly where i want.

    The link i added above, i want when you click on the “Recensie schrijven” button, it scrolls to the review form below. I tried so many page-id’s to make it work and the best i could find was to add #state in the button url. But it scrolls a little bit too low.

    Do you have any suggestion what i should add to the button url to make it scroll just so the review form is at the top/center of the screen?

    Thanks in advance

    Reply
    • Karim
      Posted on April 19, 2016 at 15:59 Permalink

      I added this line above the targetted area: [ps2id id=’home-section-2’/]

      Then i placed #home-section-2 in my button url

      I have no idea what im doing is the right way. The review form is still a little bit too low when you click the button “recensie schrijven” on this page: http://www.herenkapperderijn.nl/klantervaringen/

      Reply
    • malihu
      Posted on April 20, 2016 at 00:21 Permalink

      Hi,

      You have to enable the plugin on the “Recensie schrijven” button. As it is now, the link is not handled by ‘Page scroll to id’ (the page just jumps to the hash).

      You can enable the plugin on your link in several ways. Choose the one you want:

      a) Give your link the class ps2id

      b) Give your link the rel attribute m_PageScroll2id

      c) Add your link selector to the “Selector(s)” field in plugin settings (along with the default one). For example:
      a[rel='m_PageScroll2id'], a.ubtn-link[href*='#']

      Let me know

      PS. Adding [ps2id id='home-section-2'/] above the targeted area is correct.

      Reply
      • Karim
        Posted on April 20, 2016 at 10:37 Permalink

        Thanks for the reply. The first 2 options make the page scroll down smoothly, instead of instant jump to the targeted area. I like that alot.

        But it’s still a little bit too low.

        I leave my url link in the button: #home-section-2?

        Reply
        • Karim
          Posted on April 20, 2016 at 10:43 Permalink

          Ps: Its just the first row of the review form what cant be seen after the scrolling down. I was wondering, maybe thats cause i made the header of my website higher with CSS code and the scroll to id plugin stops at the original spot, without the extra margin i gave to the header?

          Reply
          • Karim
            Posted on April 20, 2016 at 10:51 Permalink

            Sorry i talk so much haha. What i mentioned above is correct. I added a empty line to the row above and now it’s perfect.

            It looks and works perfect. Amazing plugin.

            Thx!

          • malihu
            Posted on April 20, 2016 at 12:03 Permalink

            Yes, what happens is the fixed header “hides” the content beneath, so when scrolling to the top of the review form, it stops to the “correct” position but its top part is hidden by the fixed/sticky header.

            Your solution of adding extra empty lines works but if you want a more “global” solution that’ll work on any number of similar links, you can use plugin’s ‘Offset’ option.

            You can offset page scrolling by entering your fixed header height (in pixels) to the ‘Offset’ field in plugin settings:
            80
            or insert your fixed header selector so the plugin script adjusts to its height automatically:
            #header.navbar-fixed-top

        • malihu
          Posted on April 20, 2016 at 11:52 Permalink

          Yes.

          Reply
          • Karim
            Posted on April 20, 2016 at 18:11 Permalink

            Absolutely perfect!
            Adding the 80 offset did the trick for sure.

            Again thanks mister:)

  7. Dustin
    Posted on April 15, 2016 at 20:09 Permalink

    Thank you for the great plugin. I’m using the Prallax Pro theme. On the home have I have 5 home sections. I want to place a button on one home section that scrolls down to another home section on the same page. I’m lost with how to do this.

    Reply
    • malihu
      Posted on April 15, 2016 at 21:20 Permalink

      I’m not sure how ‘Parallax pro’ theme administration works but you should normally be able to use plugin’s shortcodes(?)

      If you’re editing the sections via WordPress visual editor you can use the shortcodes to create the links and targets for each section.
      For example, in the end of the first section you could insert:
      [ps2id url='#home-section-2']Go to section 2[/ps2id]
      which creates the link and in the beginning of the second section you could insert:
      [ps2id id='home-section-2'/]
      which creates the target.

      In WordPress visual editor you can also use plugin’s buttons (in the toolbar) instead of inserting the shortcodes manually.

      Does this help?

      Reply
  8. Reichelle Carlos
    Posted on April 5, 2016 at 11:12 Permalink

    Hi, I was able to follow up to the creating links in WordPress menu. After that, I don’t know where to put the content. Am I supposed to create different pages (or posts?) for each menu or should all the content be in one page. Where should I put the content of those? Where do I also put the you’re talking about.

    (www.oneavisharesidences.ph)

    Thanks for your help!

    Reply
    • malihu
      Posted on April 5, 2016 at 16:27 Permalink

      Hello,

      You can put your content wherever you want (as you would do without the plugin). If you want a single-page website you’d normally insert the content on a single page/post (e.g. your front-page).

      You don’t have to create different pages/posts (although the plugin will work with separate pages by checking “Scroll to location hash”).

      You can create target elements via plugin’s shortcodes (or using wp visual editor buttons on latest version) within the post/page editor. For example, in your homepage you can insert the following shortcode to the location you want the #section_about link to scroll to:

      [ps2id id='section_about'/]

      There’s also the option to create target elements on widgets using plugin’s widget or by using existing widgets id attributes (displayed in Appearance/Widgets on each active widget).

      Reply
  9. Carolin
    Posted on March 24, 2016 at 16:26 Permalink

    Hello,

    thanks for your plugin.

    I work with the Virtue theme (free version). I tried to open a accordion on id. I found the following post from you: https://wordpress.org/support/topic/open-accordion-on-id.

    I have inserted the code in footer.php but it did not work. Could you please have a look on my code.

    Thank you very much.

    Carolin

    Reply
    • malihu
      Posted on April 4, 2016 at 17:19 Permalink

      Hi,

      Not sure if you still have the issue but if you can send me your URL I might be able to help.

      Reply
  10. Trevor
    Posted on March 23, 2016 at 21:16 Permalink

    Hi,

    Thank you for this great plugin. I was struggling to write some code like this myself and was running into a number of issues that the plugin has solved.

    One question I have is at 1000px wide my website’s menu ceases to be sticky so I’d like to be able to set the offset to zero for screens sizes below that. Is there any way to do this?

    Thanks for any advice.

    Reply
    • Trevor
      Posted on March 23, 2016 at 21:40 Permalink

      I put any empty element into the page, where its height wouldn’t effect the layout, and then used CSS to set that element’s height to match the required offset. I then used the selector for that element in the Offset field and that has solved the problem.

      Thanks again!

      Reply
  11. Tonie
    Posted on March 15, 2016 at 18:29 Permalink

    Good day, Am having problem with the making the page scroll to id of this site work, I have watched most of the videos and used most of the tutorials but I still get it wrong, dont know why. If i set it, it will still not scroll to the particular page.

    Please help me out

    Thank You.

    Tonie

    Reply
    • malihu
      Posted on March 16, 2016 at 09:53 Permalink

      Hi,

      I checked your page and I can’t find any element with id section_about. There’s no target element to scroll to…

      Have you checked “Creating the target sections” in the guide?

      Reply
      • Tonie
        Posted on March 16, 2016 at 17:26 Permalink

        Please, can you mail me the step to step on how I can do it.

        Please am getting confused on doing it, I am beginner and having issue with it

        Please help me out

        Thank You
        Tonie

        Reply
  12. Williams
    Posted on March 9, 2016 at 13:07 Permalink

    Hi, I am building a new site for a client who wants the horizontal scroll, kindly explain how to do this and also slow it down, I have had no problems with the vertical scroll save for the speed. Thanks for the great job!

    Reply
  13. dorotQa
    Posted on March 1, 2016 at 23:46 Permalink

    Hi,
    I have followed your instructions and I created menu links by adding m_PageScroll2id in the Link Relationship (XFN) field (at this moment only ‘PROGRAM’ menu link has this value). I can’t figure out why this menu link is not working at all. Links without m_PageScroll2id are working as you can see: http://www.rdsummit.pl/

    Reply
    • malihu
      Posted on March 6, 2016 at 20:26 Permalink

      Hello,

      I checked your link and the rel attribute is missing from “PROGRAM”. I manually added it (rel="m_PageScroll2id") via browser’s developer tools and page scrolling worked as expected.

      Reply
  14. george
    Posted on February 25, 2016 at 15:12 Permalink

    Hello,

    I have followed your instructions and developed my page but the buttons when clicked with the link (ex: http://www.business-travel.gr/en/dmc-greece/#section-1) is significantly slow. I am wondering if i made mistakes. Could you please check my page and let me know of what you thing?
    Great plugin btw..
    Thank you in advance

    Reply
  15. cajun
    Posted on February 18, 2016 at 18:46 Permalink

    i cant get the offeset to make a difference. Please help as its overlapping my content. i played around with so many setting i cant figure it out.

    Reply
    • cajun
      Posted on February 18, 2016 at 18:47 Permalink
    • malihu
      Posted on February 18, 2016 at 18:56 Permalink

      Your links are not handled by the plugin (they’re handled by some other script by the theme or another plugin).

      You need to enable ‘Page scroll to id’ on your menu links by adding the m_PageScroll2id value in ‘Link Relationship (XFN)’ field.
      See “Creating links in WordPress Menus” for more info

      Reply
      • cajun
        Posted on February 18, 2016 at 19:12 Permalink

        thanks for the fast reply. I have done as suggested but it still doesnt seem to be linked. Glad to see you reply so quickly

        Reply
        • malihu
          Posted on February 19, 2016 at 00:22 Permalink

          It seems then that the links are handled by another script. I see an additional js click event on your menu links which is probably scrolling the page and prevents ‘Page scroll to id’ from working on your menu links. You can check it by deactivating ‘Page scroll to id’ and see if page scrolling is still working. I don’t know if there’s an option in your theme to disable this and only use ‘Page scroll to id’ for scrolling…

          Reply
          • cajun
            Posted on February 19, 2016 at 08:56 Permalink

            Well its the sydney them i dont think theres a way to manually get red of it without code which i have no clue how to do. Any ideas?

        • malihu
          Posted on February 19, 2016 at 14:43 Permalink

          Can’t say… You’ll have to contact the theme developer.

          Reply
  16. Rich
    Posted on February 17, 2016 at 22:17 Permalink

    Thank you for such a great plugin!

    I’ve been able to figure out how to use the plugin for the most part. However, I can’t for the life of me figure out how to use the offset function. As someone said earlier, no matter what I put into the offset option, my sections are still covered by my sticky header. Can you please advise?

    Thanks,
    Rich

    Reply
    • malihu
      Posted on February 18, 2016 at 01:12 Permalink

      Hello,

      Change offset value to a number without the “px” part, e.g. 25
      Also, your target elements are below the section titles, so I’m not sure if 25 pixels is enough(?)

      Let me know 🙂

      Reply
  17. Marcel Costa
    Posted on January 28, 2016 at 18:19 Permalink

    Hi there. This is a great plugin. I’ve managed to set up the scrolling to page sections very easily, but am having difficulty setting up the links to highlight on rollover. At the moment they’re stuck on white. Any ideas?

    Reply
    • malihu
      Posted on January 28, 2016 at 19:54 Permalink

      Hi,

      The plugin doesn’t deal with general CSS like :hover. In general, you need to insert a :hover rule in your theme’s CSS. In your case something like this:

      .custom.main-navigation .navbar-default .navbar-nav > .active > a:hover{ color: red; /* set the color you want */ }

      In addition, to highlight the links while page is scrolling you need something like:

      .custom.main-navigation .navbar-default .navbar-nav > .active > a.mPS2id-highlight, .custom.main-navigation .navbar-default .navbar-nav > .active > a.mPS2id-highlight:focus{ color: yellow; /* set the color you want */ }

      Reply
      • Marcel
        Posted on January 29, 2016 at 13:04 Permalink

        Thanks so much. Works perfectly now!

        Reply
      • Marcel
        Posted on February 2, 2016 at 17:03 Permalink

        I’d like to link menu items to three different text boxes that are within the same page section.

        The website is: http://www.precisionoutcomes.uk/

        and the three sections I want to link to are ‘Platform’, ‘Services’ and ‘Devices’

        Every time I put a href link in one of the boxes the navigation takes me to the first block (Platform). Any ideas of how I can fix this?

        Reply
        • malihu
          Posted on February 2, 2016 at 20:22 Permalink

          I’m assuming you’re talking about the mobile/narrow layout, correct?

          At the moment, in your menu you have the links:

          #platform #services #devices

          but in your content you only have the services id (there are no elements with id platform or devices).

          The services id element is above the 3 sections, so the page scrolls to this position when “SERVICES” link is clicked (the other 2 links do nothing as there’s no id to scroll to).

          You should:

          a) Move the services id element right before the “Services” column (currently it’s above the 3 columns wrapper).

          b) Add another 2 elements with id attributes platform and devices and place them right before the “Platform” and “Devices” columns accordingly.

          Reply
  18. Kevin
    Posted on January 21, 2016 at 00:30 Permalink

    Hi, I’m trying to get an alternative “add to cart” button link to a tab at the bottom of the page.

    This is how I’m linking adding the button and calling the tab so far in my function.php. I don’t understand how to link the though. Please help.

    //Add to Cart Function add_action('woocommerce_single_product_summary','replace_add_to_cart'); function replace_add_to_cart() { global $product; if ( ! $product->is_in_stock() ){ remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_add_to_cart'); add_action( 'woocommerce_single_product_summary','consult_bezambar_expert', 30 ); function consult_bezambar_expert() { global $product; echo '<form action="' . esc_url("#tab-Consult_Expert") . '" rel="scroll_to_tab" method="get"> <button type="submit" class="single_add_to_cart_button button alt">Consult Bez Ambar Expert</button> </form>'; } } } //Change Review tab to inquiry add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 ); function woo_remove_product_tabs( $tabs ) { unset( $tabs['reviews'] ); // Remove the reviews tab return $tabs; } add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' ); function woo_new_product_tab( $tabs ) { // Adds the new tab $tabs['Consult_Expert'] = array( 'title' => __( 'Contact Expert', 'woocommerce' ), 'priority' => 50, 'callback' => 'woo_new_product_tab_content' ); return $tabs; } function woo_new_product_tab_content() { $product = get_product(); $product_title = get_the_title( $product->ID ); $product_sku= $product->sku; ?> <section class="Inquiry"> <div id="section-1">You can call us at 1-866-644-8111 or fill out the form below.</div> <?php echo do_shortcode( '[gravityform id="2" name="Inquiry" title="false" description="false" field_values="title_product='.$product_title.'" field_values="sku_product='.$product_sku.'"]'); ?> </section><!-- /.west-product-inquire --> <?php } function wc_direct_link_to_product_tabs() { if( is_product() ) { ?> <script type="text/javascript"> jQuery(document).ready(function($) { if( window.location.hash ) { // Vars var tab = window.location.hash.replace('#', ''); var tab_content = 'tab-' + tab; // Tabs $( 'li.description_tab' ).removeClass( 'active' ); $( 'li.' + tab + '_tab' ).addClass( 'active' ); // Tabs content $( '#tab-description' ).hide(); $( '#' + tab_content ).show(); } // when the tab is selected update the url with the hash $(".tabs a").click( function() { window.location.hash = $(this).parent('li').attr("class").replace(' active', '').replace('_tab', ''); }); }); </script> <?php } } add_action( 'wp_footer', 'wc_direct_link_to_product_tabs', 30 );

    Reply
    • malihu
      Posted on January 22, 2016 at 06:21 Permalink

      I don’t really understand what you’re trying to do or what happens. I need to see which link you’re adding, in which page and what’s the target.

      Reply
  19. Christy
    Posted on January 19, 2016 at 06:02 Permalink

    Can I have 2 or 3 buttons on a single page with different scrolling speeds assigned to each button. I run a guitar chords website and the tempo of the song determines the speed you need the page to scroll. Would this be a possibility? Currently I’m using some javascript scrolling thing (not a plugin) and it’s okay, but I only have one speed.

    http://www.liveloveguitar.com/adele-hello-guitar-chords/

    Thanks!

    Reply
    • malihu
      Posted on January 20, 2016 at 04:16 Permalink

      Interesting!
      It’s not possible out-of-the-box but you could do it with an additional custom script in your HTML/theme. Would this work for you?

      For example:

      Installation

      1) Install the plugin.

      2) In plugin settings, uncheck “Auto-adjust animation speed” and set “Scroll animation easing” to linear.

      3) Insert the following script at the end of your HTML document just before the closing body tag (e.g. in footer.php after wp_footer() (it should appear after ‘Page scroll to id’ plugin scripts):
      <script> (function($){ $(window).load(function(){ var ps2idData=$(document).data("mPS2id"),origScrollSpeed=ps2idData.scrollSpeed; $("a[data-ps2id-speed]").click(function(e){ e.preventDefault(); var $this=$(this), val=$this.attr("href"), pct=Math.round(100*($(val).offset().top-$(window).scrollTop())/$(val).offset().top), speed=$this.attr("data-ps2id-speed"), scrollable=$("html,body"); if(!scrollable.is(":animated")){ ps2idData.scrollSpeed=(pct/100)*speed || origScrollSpeed; $.mPageScroll2id("scrollTo",val); }else{ scrollable.stop(); } }); }); })(jQuery); <script>

      Usage

      4) Edit your auto-scroll links and add the attribute data-ps2id-speed with the speed you want for each link (speed value in milliseconds), e.g.:
      <!-- 6 seconds auto-scroll duration --> <a href="#some-id" data-ps2id-speed="6000">Start/Stop</a>

      5) At the end of the chords sheet add the target element (manually or via plugin’s shortcodes), e.g.:
      <div id="some-id"></div>

      Hope this helps

      Reply
      • Christy
        Posted on January 20, 2016 at 09:35 Permalink

        I hope it helps too! I can’t do it myself, but I will have my ‘go to’ guy try it to get it implemented as soon as he has time to. Thank you so much! I’ll let you know if it works 🙂

        Reply
  20. Tom
    Posted on January 16, 2016 at 00:04 Permalink

    Please take a look at my implementation of your code.

    http://test.reinharts.com

    I am getting different results on mobile and desktop and cannot figure out which offset settings to use.

    I have tried integers and the classes for both menus (.fixed-menu, .mobile-justify).

    It works pretty well desktop, but doesn’t stop correctly on mobile.

    Thanks for your hard work on this plug-in!

    Reply
    • malihu
      Posted on January 16, 2016 at 02:25 Permalink

      The mobile menu links seem to be handled by another script (they have an additional js click event attached). Maybe it’s an internal script by the theme or some other plugin(?) that overwrites ‘Page scroll to id’ functionality.

      You can see the difference between desktop and mobile by noticing 2 things happening on mobile menu:
      a) Lack of animation in page scrolling (page just jumps to position).
      b) How the address bar URL changes when clicking the mobile menu links (this doesn’t happen on desktop mode as the links are handled by ‘Page scroll to id’).

      I’m not sure if there’s some setting in your theme to disable this… If you can’t find anything you can always disable ‘Page scroll to id’ below a specific screen-size (see “Disable plugin below” in plugin settings).

      Other notes:
      In order to enable links highlighting, you need to change the links URL to the full address, e.g. from:
      /#section-1
      to:
      http://test.reinharts.com/#section-1

      Reply
      • Tom
        Posted on January 16, 2016 at 04:27 Permalink

        Thank you for your prompt reply. I appreciate your help.

        Reply
  21. Lauren Devine
    Posted on December 22, 2015 at 06:59 Permalink

    Hey there! I’m using Page Scroll 2 ID for a client’s site and the offset just isn’t working at all.

    I tested with positive numbers, negative numbers, with “px”…without “px”…even the hash tag (id) for the sticky menu from within your plugin settings. It just doesn’t seem to be working. I even tried coding the offset directly into the HTML on the page in question. Additionally, I’m having the same issue on two different client’s sites (using different themes) at this point…so I’m not sure what’s wrong?

    I tried using the short codes, but they weren’t working, so I just made links and div targets and coded it that way.

    Any recommendations?

    SITE ISSUE PAGE: pamthielastrology.com/claytonthiel/gallery/

    Here is the code being used:
    <div align="center"><a href="#platesWallHangings" rel="m_PageScroll2id" data-ps2id-offset="150">Plates & Wall Hangings</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#bigHeads" rel="m_PageScroll2id" data-ps2id-offset="150">Big Heads</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#shamanicFigures" rel="m_PageScroll2id" data-ps2id-offset="150px">Shamanic Figures</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#stoneSculptures" rel="m_PageScroll2id" data-ps2id-offset="150">Stone Sculptures</a></div>

    Thanks for any help you can offer!

    Reply
    • malihu
      Posted on December 22, 2015 at 15:14 Permalink

      Hello,

      You links seem to be handled by some other script or plugin.

      When you click any of the links you can see its hash appended to browser’s address bar. This is not the behavior of “Page scroll to id”. I inspected all links and they have a second js click event attached (in addition to the one added by “Page scroll to id”).

      You have to find which script handles your links. Maybe it’s a theme script or some other plugin(?)

      Reply
  22. Nikita
    Posted on December 16, 2015 at 17:31 Permalink

    hi malihu,

    i like your plugin and its working very well on my desktop but unfortunately not on my mobile device…. i think/know the problem is my wp-theme! i tried to fix the issue with “Activating plugin on links without rel attribute” but still no help…

    i hope you may help me. Link

    brg
    nikita

    Reply
    • malihu
      Posted on December 16, 2015 at 18:15 Permalink

      Hello,

      The issue is indeed within your theme but the rel attribute is not the problem as I see it on the links when inspecting the page (and in fact, the plugin does handle the links as it should).

      The problem is that the mobile menu links parent element (li) have some js click event binded which prevents the other events on the links themselves from working.
      I can’t really say where, how or why this event is added (all .js files are minified for production)… Maybe it’s another plugin or a theme script(?)
      Is there’s some setting for this in your theme?

      Reply
      • Nikita
        Posted on December 16, 2015 at 21:36 Permalink

        Hello Malihu,

        thank you for the very fast replay! 🙂

        I also recognized that if the menu is opened on mobile, the page is no longer scrollable. The js. is minified by an cache plugin – i will disable it so you can have a look if you have time.

        thank you

        Reply
  23. Bob Norris
    Posted on December 15, 2015 at 18:37 Permalink

    I am having quite a time trying to get this to work. Could anybody help with just one link I can use as an example for the others?

    Thanks in advance

    Reply
  24. Otto
    Posted on December 11, 2015 at 14:20 Permalink

    I really like the plug-in – but i can only manage it to define one link with it 🙁

    What i did:

    I added this in my site [ps2id id=’ref’/]

    in the menue is added #ref (URL-Field) and m_PageScroll2id (XFN-field)

    The link works perfekt.

    Then I added an other traget named “lei” on my site [ps2id id=’lei’/]

    in the menue is added #lei (URL-Field) and m_PageScroll2id (XFN-field)

    What i’m doing wrong?

    Reply
    • malihu
      Posted on December 11, 2015 at 18:46 Permalink

      I can’t really say… nothing sounds wrong. What happens when you click the link? Does it go to the anchor point without scrolling animation or it does nothing? Maybe there’s some typo in XFN-field (e.g. an extra space)?

      Reply
  25. anna
    Posted on December 10, 2015 at 01:05 Permalink

    I have a button in my page and I want the page to id plugin to work on it when clicked…I don’t know how to add it to selector(s) field since the button doesn’t have rel attribute.
    This is what I see when I inspect the button:

    <a href="http://greenstinct.com/#feature-2-4-1-1">N U T R I C I Ó N</a>

    I have tried this on the selector’s field but doesn’t work…

    a[rel=’m_PageScroll2id’], .maxbutton-7.maxbutton-nutricion.maxbutton a

    Help 🙁

    Reply
    • malihu
      Posted on December 10, 2015 at 06:54 Permalink

      Can you re-post the markup you see when inspecting the button (along with its parent element) by including the HTML in code tags (see info inside and below “Comment” field) so it doesn’t get stripped from the comment?

      Reply
      • anna
        Posted on December 10, 2015 at 13:41 Permalink

        Yes! Sorry…

        <a class="maxbutton-7 maxbutton-nutricion maxbutton" href="http://greenstinct.com/#feature-2-4-1-1"> <span class="mb-text">N U T R I C I Ó N</span> </a>

        Reply
        • malihu
          Posted on December 10, 2015 at 13:58 Permalink

          ok, since the classes are applied on the anchor element you could insert the following to “Selector(s)” field:

          a[rel='m_PageScroll2id'], a.maxbutton-7.maxbutton-nutricion.maxbutton

          The above will apply to this specific button only (maxbutton-7)

          I don’t know if you want to have other buttons do the same but it would be better to change the selector a bit to match the more general class maxbutton along with an href value including a hash (#):

          a[rel='m_PageScroll2id'], a.maxbutton[href*='#']

          This means that the plugin will apply (in addition to the default selector) to anchor elements (a) with class maxbutton that also have a hash (#) somewhere within their href value.

          Reply
          • Anna
            Posted on December 10, 2015 at 16:46 Permalink

            It worked. Thank you so much!
            There’s another thing I can’t get to work…as you can see I’m new to this.
            I want to highlight the links with the mPS2id-highlight class but don’t know what to add in the style.css. This is the inspect element of a main menu link:

            <li id="menu-item-4111" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4111"><a rel="m_PageScroll2id" href="http://greenstinct.com/#feature-2-1-0-1" class="_mPS2id-h mPS2id-highlight">Proyecto</a></li>

        • malihu
          Posted on December 10, 2015 at 19:22 Permalink

          I checked your link (greenstinct.com) and firstly you need to remove the #main-nav value from the “Highlight selector(s)” field in plugin settings or change it to: #main-nav .menu-item a (I assume you added this value for testing).

          You can then add the mPS2id-highlight class in your theme’s CSS and style the highlighted menu links the way you want.

          You can normally edit your theme’s stylesheet within WordPress administration via “Appearance > Editor > Stylesheet”. In style.css you can simply add the class with the style you want.
          For example:

          .mPS2id-highlight{ color: #00e6b4; }

          Hope this helps

          Reply
          • anna
            Posted on December 10, 2015 at 23:09 Permalink

            I followed your instructions but didn’t work (added the exact code in style.css).
            When the section is visible, I can see the mPS2id-highlight class automatically added to the link (when I inspect the element), but its color doesn’t change…any idea?

        • malihu
          Posted on December 11, 2015 at 06:08 Permalink

          Ah yes, you probably need a more specific selector to overwrite the other rules applied on the links. Try adding:

          #main-nav .menu-item > a.mPS2id-highlight{ color: #00e6b4; }

          Reply
          • anna
            Posted on December 11, 2015 at 10:29 Permalink

            I worked!!! Thank you for your help 🙂

  26. charlie
    Posted on December 7, 2015 at 11:52 Permalink

    Hello,
    Great plugin.
    from some reasons its working for only the first two links in the top menu in this page:
    http://ecpm.co.il/agency/

    the other links goes to the second link (אודות) you have any idea why

    Thanks

    Reply
    • malihu
      Posted on December 7, 2015 at 13:18 Permalink

      Hello,

      The problem

      Your sections like the .home-intro, .about-us etc. are floated left. This means that you have to clear them (in CSS) in order for their parent element/container to have a proper height (if you don’t clear them its height is zero) – info.

      In your case, your sections parents are the actual target elements (#sctn-hintro, #sctn-au etc.) and because their floated children are not cleared, they get zero height thus, not properly positioned within the vertical axis of your document (which results in “wrong” scrolling position when links are clicked).

      The solution

      You can clear any floated element easily by setting its container overflow to hidden.
      So in your case, just add the following to your CSS:
      #sctn-hintro, #sctn-au, #sctn-srvos, #sctn-foifoi, #sctn-porflo, #sctn-clnt{ overflow: hidden; }

      This will also fix the page’s horizontal scrollbar and possibly other layout issues 😉

      Reply
  27. mari
    Posted on December 6, 2015 at 17:58 Permalink

    mPS2id-highlight how to configure

    Reply
    • malihu
      Posted on December 6, 2015 at 19:55 Permalink

      What exactly you need?

      Reply
      • mari
        Posted on December 8, 2015 at 09:23 Permalink

        am configured fully page scroll to id but

        menu high lite how to configure

        Reply
        • malihu
          Posted on December 8, 2015 at 13:41 Permalink

          You just add the mPS2id-highlight class with the rules you want to your CSS, e.g. .mPS2id-highlight{ color: red; }
          More info in Links highlighting section.

          Reply
  28. edbergswe
    Posted on November 17, 2015 at 11:50 Permalink

    Hi,

    Not sure how active you are at the WordPress Support page so I thought I could post here too.

    Sorry but I’d to like to get some help while the site is up and running and I can’t activate Maintenance Mode since then you won’t be able to locate the problem.

    Anyway, the problem is that the floating menu doesn’t work. The menu doesn’t show up at all.

    <a href="#section1" rel="nofollow">section1</a> <a href="#section2" rel="nofollow">section2</a> <a href="#section3" rel="nofollow">section3</a>

    Here’s the page where I’m testing at, and used the manual approach.
    http://www.mixningskonsulten.com/intro-4

    I tried without the ul / li stuff before, as the post at WordPress indicates.

    At this page I also tried with the shordcodes instead:
    http://www.mixningskonsulten.com/intro-6

    [ps2id url='#section1']section1[/ps2id] [ps2id url='#section2']section2[/ps2id] [ps2id url='#section3']section3[/ps2id]

    But same problem on both: the links only appear as ordinary links on the page, no floating menu as the demo-pages demonstrated.

    The plug-in seems to work otherwise.

    What I forgot to mention before was that I think the classname of the menu is “art-nav”, but I’m not sure how relevant this is.

    Best regards,
    edbergswe

    Reply
  29. Martin
    Posted on November 13, 2015 at 17:01 Permalink

    Hello,

    I have created 6 menue links (under blagovne znamke) and 6 target sections. But only 1 section (SKIP HOP) has smooth and nice scrolling , all other 5 sections it just jumps with no nice transitions. Also the offset value is only appliend to “SKIP HOP” section not for others. What could be the problem?
    Thanks, MArtin

    Reply
    • malihu
      Posted on November 13, 2015 at 17:39 Permalink

      Hi,

      The plugin is applied only on the “SKIP HOP” link because of a typo in your other links. It seems you have an extra space character in the rel attribute:
      rel="m_PageScroll2id "
      Change them to:
      rel="m_PageScroll2id"
      and everything will work 😉

      Reply
      • Martin
        Posted on November 13, 2015 at 18:23 Permalink

        Uau, thanks for your quick reply. And of course thanks for all your effort.

        Bu to be honest, I have no idea where can I find that link to correct it. I haven’t copied it anywhere. I just copied m_PageScroll2id in menu settings and
        Section 1 content…
        for the sections… that is all I have used. Could you please enlighten me in which file I can find that links to correct them. Thanks for everything, Martin

        Reply
        • malihu
          Posted on November 13, 2015 at 18:50 Permalink

          On the same place (menu settings?) you copied m_PageScroll2id value.

          Normally, you created the menu links in “Appearance > Menus”, correct?
          Just edit the XFN field of the links (where you pasted m_PageScroll2id) and remove the space at the end.

          Reply
          • Martin
            Posted on November 13, 2015 at 19:11 Permalink

            OMG, thanks I wass looking the code, where to paste the whole rel=”m_PageScroll2id” thing, did not notice space in menu sett. Thanks a lot, it works!

  30. enrika
    Posted on October 23, 2015 at 04:31 Permalink

    First of all, thanks for the great plugin, it was exactly what I had been looking for. Recently, I tried to use the code in the menu using the (xfn) field but I keep getting <a rel="relm_PageScroll2id" href="#ourstory">Our Story</a> in the resulting html. Not sure why it’s adding in an extra rel within the quotes. Any help would be great. Thx

    Reply
    • Enrika
      Posted on October 23, 2015 at 04:32 Permalink

      also here is the website in which this is happening. storysitez.com

      Reply
      • malihu
        Posted on November 7, 2015 at 01:08 Permalink

        I cannot see ‘Page scroll to id’ plugin installed in your page/theme. Is it activated?

        Reply
    • malihu
      Posted on October 23, 2015 at 19:54 Permalink

      Do you enter m_PageScroll2id in the xfn field? I’ve never encountered such issue…

      Reply
      • enrika
        Posted on November 6, 2015 at 20:35 Permalink

        yes. you can view the issue here at http://storysitez.com

        Reply
        • Iván
          Posted on January 7, 2016 at 23:15 Permalink

          You might have copied the entire rel=”m_PageScroll2id” line into the XNF field, when you should actually just copy m_PageScroll2id. Happened to me.

          Reply
        • malihu
          Posted on January 11, 2016 at 13:51 Permalink

          Iván answer is correct. Insert:
          m_PageScroll2id
          in XFN field (see screenshot in “Creating links in WordPress Menus” section)

          Reply

Comments pages: 1 2 3 4 5 6

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