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


445 Comments

Post a comment

Comments pages: 1 3 4 5

  1. David
    Posted on February 24, 2017 at 02:13 Permalink

    Hey man, great plug-in, but i have a question. I have only set the plug-in to work with my contact area and for some reason when i click the button the page first refreshes then it does the magic. Any idea how i can stop the page from refreshing?

    Cheers.

    Reply
    • malihu
      Posted on February 24, 2017 at 02:48 Permalink

      Hi,

      The page refreshes because your link’s URL uses http while your server uses https. Simply change your link’s URL to https://www.ftb-unibuc.ro/#contact to fix this.

      After changing the link, you’ll notice that the page “jumps” to the id instead of scrolling smoothly. This happens because your theme seems to be using a custom menu walker function as well as a custom page scrolling function for the in-page menu links.

      Because of the custom menu walker function, “Page scroll to id” cannot be automatically enabled on the menu links, so you need to give the contact link the class ps2id.

      Lastly, go to plugin settings and enable “Prevent other scripts from handling plugin’s links” option to prevent your theme from handling the link and let “Page scroll to id” to its thing.

      Reply
  2. Chris
    Posted on February 22, 2017 at 20:23 Permalink

    Hello I’m Chris, First of all great plugin.
    I have a problem when from the menu I click the target the scrolling plugin always start from the top pf the page.
    For example the last section of the page is contact and over it there is Donate.
    If I’m already in the contact section and I want to reach donate it goes up at the top of the page and down to the target.
    Do you know how to fix this problem?
    The webpage is not live yet.
    I’ll wait details thanks
    Chris

    Reply
    • malihu
      Posted on February 23, 2017 at 00:51 Permalink

      Hello Chris,

      I’d need a bit more info or to see your site in order to see what exactly happens and help.

      Does the page reload when clicking the links? If yes, make sure your links URL match exactly the browser’s address bar URL (e.g. see if you’re missing the www part from links URL).

      Reply
  3. Pauliina
    Posted on February 18, 2017 at 22:28 Permalink

    My page is created with WordPress Enlightenment theme. The problem is that all links targeting to the main page are highlighted in menu as bold. Only one link that goes to another page is not highlighted. I wouldn’t like to have any kind of highlight there at all, I would like all menu items to look like “tausta” is looking now (meaning it is normal grey text, not bolded). How can I make that happen? I have tried all possible ticks in scroll-to-id settings but nothing changes. And I am not familiar with those CSS things, so I couldn’t figure out what I should write not to highlight anything, since the default seemed to be that I should want them highlighted 🙂

    But this functionality is great anyway, thanks a lot for that!

    Reply
    • malihu
      Posted on February 18, 2017 at 23:28 Permalink

      The “highlighting” you see comes from your theme’s stylesheet (not from “Page scroll to id”). It’s common for themes to style current page menu items differently.

      Since all your menu links (except “Tausta”) point to a target on the same page, the theme considers them current/active links and apply the bold styling.
      The CSS where this happens is in ...themes/enlightenment/style.css in line 791.

      You should edit your theme’s CSS (style.css) and change or overwrite the current/active link styling so it does not apply on “Page scroll to id” links.

      For example, adding the following CSS in style.css or in the theme’s custom CSS will do what you need:

      .navbar-default .navbar-nav > .active > a._mPS2id-h { font-weight: normal; color: #555; }

      Hope this helps

      Reply
      • Pauliina
        Posted on February 19, 2017 at 12:45 Permalink

        Thank you SO MUCH for your help and easy instructions! This corrected the situation and it works perfectly now!

        Reply
  4. Alejandro C
    Posted on February 11, 2017 at 19:14 Permalink

    Hello, I am using your plug in as the developer from my theme recommended i use it. Although the menu on my website seems buggy when you click on the links.

    Do you think you can help me out?

    Regards,

    Reply
    • malihu
      Posted on February 11, 2017 at 19:31 Permalink

      Hello,

      Your menu links seem to be handled by a script in your theme (i.e. the theme has its own way of scrolling to page anchor points).

      Try enabling “Prevent other scripts from handling plugin’s links” option in plugin settings and see if it fixes the issue.

      Let me know

      Reply
      • Alejandro C
        Posted on February 11, 2017 at 19:40 Permalink

        Thank You

        That fixed the issue.

        Great customer service.

        5 stars

        Reply
        • malihu
          Posted on February 11, 2017 at 19:59 Permalink

          You’re welcome. Glad I helped 🙂

          Reply
  5. Alvin
    Posted on February 3, 2017 at 13:04 Permalink

    Excellent!

    I see that you have improved the tutorial quite much; even with an easy to follow video.

    Keep doing a terrific job.

    Best regards,

    Alvin

    BTW, shouldn’t I receive an email when you answer a comment? I always have to get back to the comment section to see is any reply.

    Reply
    • malihu
      Posted on February 3, 2017 at 14:31 Permalink

      Thanks for the feedback 🙂

      I’ve just released a new version (1.6.2) which introduces new features, options etc., so I also updated (and extended) the basic tutorial. I’ll try to post more guides and videos for plugin’s advanced features.

      WordPress doesn’t send email notifications to anonymous users but I’ll try to find/implement a simple solution for this (e.g. email notifications on comment replies).

      Reply
  6. Jtd
    Posted on February 2, 2017 at 02:29 Permalink

    Hi im having a problem. Page to scroll id is not scrolling down. Can you help me find the conflict to the plugin? Page scroll I set up to about us page. (Menu: Mission, Vision and Corp profile. Thanks

    Reply
    • malihu
      Posted on February 2, 2017 at 03:27 Permalink

      Hi,

      There’s a script in your theme that handles your links and prevents “Page scroll to id” from working. The script is:
      ...themes/mobius/js/ajaxify.js

      You need to edit ajaxify.js, find line 77 and the change part:
      $this.find('a:internal:not(:contains(checkout),:contains(Checkout),
      to:
      $this.find('a:internal:not(:contains(checkout),._mPS2id-h,:contains(Checkout),
      leaving the rest of the code in that line (77) exactly as it is.

      We’re just adding the ._mPS2id-h selector to the string so the function does not mess with “Page scroll to id” links.

      Hope this helps

      Reply
      • Ji
        Posted on February 2, 2017 at 05:44 Permalink

        Thanks. It works.

        Reply
  7. Horace
    Posted on February 1, 2017 at 00:03 Permalink

    Coped the lines that now begin to show differences:
    AS ENTERED IN TEXT
    1 [ps2id url=’#1^’ offset=”]1[/ps2id][ps2id id=’1^’ target=”/]
    2 [ps2id url=’#2′ offset=”]2[/ps2id][ps2id id=’2′ target=”/]
    3 [ps2id id=’3′ target=”/][ps2id url=’#3′ offset=”]3[/ps2id]
    4 [ps2id id=’4′ target=”/][ps2id url=’#4′ offset=”]4[/ps2id]
    5 [ps2id id=’5′ target=”/] [ps2id url=’#5′ offset=”]5[/ps2id]

    IN NOTES at end of text:
    1 [ps2id url=’#1^’ offset=”]1[/ps2id][ps2id id=’1^’ target=”/]
    2 [ps2id id=’2′ target=”/][ps2id url=’#2′ offset=”]2[/ps2id]
    3 [ps2id id=’3′ target=”/][ps2id url=’#3′ offset=”]3[/ps2id]
    4 [ps2id url=’#4′ offset=”]4[/ps2id] [ps2id id=’4′ target=”/]
    5 [ps2id url=’#5′ offset=”]5[/ps2id][ps2id id=’5′ target=”/]

    Reply
    • malihu
      Posted on February 1, 2017 at 17:00 Permalink

      The links should be like:

      [ps2id id='_ftn1_ref'/] [ps2id url='#_ftn1']1[/ps2id] [ps2id id='_ftn2_ref'/] [ps2id url='#_ftn2']2[/ps2id] [ps2id id='_ftn3_ref'/] [ps2id url='#_ftn3']3[/ps2id] [ps2id id='_ftn4_ref'/] [ps2id url='#_ftn4']4[/ps2id] [ps2id id='_ftn5_ref'/] [ps2id url='#_ftn5']5[/ps2id]

      The notes should be like:

      [ps2id id='_ftn1'/] [ps2id url='#_ftn1_ref']1[/ps2id] [ps2id id='_ftn2'/] [ps2id url='#_ftn2_ref']2[/ps2id] [ps2id id='_ftn3'/] [ps2id url='#_ftn3_ref']3[/ps2id] [ps2id id='_ftn4'/] [ps2id url='#_ftn4_ref']4[/ps2id] [ps2id id='_ftn5'/] [ps2id url='#_ftn5_ref']5[/ps2id]

      Reply
      • Horace
        Posted on February 2, 2017 at 18:58 Permalink

        Phew! Thanks so much, Malihu!

        Those links all work so well on the pages where I’ve been placing them.

        Except that two of the pages show ordinary type rather than italics as on the first page. I tired, but haven’t succeeded in italicising the code. Can you suggest how?

        Also, if there any chance of automating the footnote numbers?

        So many thanks again!

        Horace

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

          You’re welcome 🙂

          1. You can make any text italic via CSS, for example:
          span.italic { font-style: italic; }
          but I can’t give you the exact CSS code cause I don’t know which elements you want italic(?)

          2. The plugin cannot automate such numbers as it’s out of its scope/functionality.

          Reply
        • Horace
          Posted on February 6, 2017 at 12:42 Permalink

          I did get it done.
          It’s scrolling nicely.
          And right on target.
          Thanks so much, Malihu

          Reply
  8. Horace
    Posted on January 31, 2017 at 23:37 Permalink

    Hi,

    Did my best to avoid having to come for help; but hours spent getting my first footnotes sorted left me with the five notes on my first post acting inconsistently.
    Haven’t been able to settle on one pattern.
    The notes scroll Ok in one direction, but not in the other, and all fail to land on the line needed.
    I just don’t get the coding – offsets and ids – right.

    Can you help?

    Reply
  9. Manuel
    Posted on January 20, 2017 at 12:11 Permalink

    Hi malihu,

    your plugin is working so far good – the only thing that I can’t get correct, is the smooth scrolling on the website. On the mobile version it somehow works, but when you go to the websit, it’s just jumping to the ID’s I set.
    Do you have any idea why?

    Thx for your help,
    Manuel

    Reply
    • malihu
      Posted on January 20, 2017 at 19:10 Permalink

      Hi,

      Your links seem to be handled by the following script:
      ...themes/bridge/js/default.min.js
      which prevents “Page scroll to id” from handling your links and scroll the page.

      The script is minified but my guess is that the following part of code should be changed:
      ".vertical_menu a, .qbutton:not(.contact_form_button), .anchor, .widget li.anchor a"

      Try editing default.min.js and change the above code to:
      ".vertical_menu a:not(._mPS2id-h), .qbutton:not(.contact_form_button), .anchor:not(._mPS2id-h), .widget li.anchor a:not(._mPS2id-h)"

      This should prevent the script from messing with “Page scroll to id” links.

      Let me know

      Reply
      • Manuel
        Posted on January 23, 2017 at 13:40 Permalink

        Hi malihu,

        awesome, it works perfectly now.
        Thank you very much – I love your PlugIn.

        Have a wonderful day,
        Manuel

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

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

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

    Hi Malihu

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

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

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

    Can you help me? thanks a lot!

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

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

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

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

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

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

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

      Doing the above should do the trick

      Reply
      • Jamie
        Posted on January 16, 2017 at 22:27 Permalink

        Hi Malihu,

        Thanks for the reply! I did all that you mention and it still seems to jump to a section rather than scroll. For some reason if I refresh the page, click around on the nav before its fully loaded Ill see the page ease in scroll to different sections but after a couple seconds it jumps to sections again.

        What do you think is the problem here?

        Thanks!

        Reply
        • malihu
          Posted on January 16, 2017 at 22:54 Permalink

          I just checked your link and page scrolling seems to work as expected. Did you fixed it or?

          Reply
          • Jamie
            Posted on January 16, 2017 at 23:51 Permalink

            I did change what you said, but it still doesnt scroll smoothly. It just jumps to section to section

        • malihu
          Posted on January 17, 2017 at 00:00 Permalink

          The link is http://thesorellegroup.com/, right?
          The page scrolls smoothly for me (tested it in Chrome and Firefox) when I click the sticky header links. Is there a chance you’re seeing a cached version?

          Also note that smooth page scrolling is not possible before the page is fully loaded.

          Reply
          • Jamie
            Posted on January 17, 2017 at 04:06 Permalink

            You my main, are a genius. And I’m a peanut. Forgot I had supercache enabled on both my chrome and safari. Tried it on Firefox and it’s all working well. Thanks so much!! I love this plugin

        • malihu
          Posted on January 17, 2017 at 18:46 Permalink

          Awesome 🙂

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

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

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

      Hi,

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

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

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

      Hope this helps

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

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

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

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

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

      Hi,

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

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

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

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

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

    With Gratitude,
    Maria Lara

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

      Hello Maria,

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

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

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

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

    Hi again,

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

    Regards,

    Alvin

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

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

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

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

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

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

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

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

        Regards and a very happy new year!

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

          Happy new year 🙂

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

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

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

            Regards,

            Alvin

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          2. Add the following CSS rule to your theme:

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

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

            Hi, it works great. Thanks!

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

    Hi,

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

    Reply

Comments pages: 1 3 4 5

Post a comment

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

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

css.php