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

Page scroll to id for WordPress

 

Knowledge Base – FAQ

Topics: General WordPress Menu Links highlighting Links Targets Page scrolling Offset jQuery/Javascript

 

Pages: 1 2


327 Comments

Post a comment

Comments pages: 1 2 3 4

  1. Petar
    Posted on May 21, 2018 at 12:06 Permalink

    Hi I have a problem with my website and was wondering if I can resolve it with your plugin.

    When I click on the browser back button I can get my page to scroll back on the anchor link I was on.

    Any pointer on how I can fix this?

    Reply
  2. John Iquashon
    Posted on May 13, 2018 at 21:24 Permalink

    I’m sorry, but I’m moderately skilled with CSS and code – but cannot understand why on the linked page below, the Scroll2 link works as it should when placed as a shortcode from the text editor, but the same class does not function when the class is assigned to an image.

    I’ve all of the many class references in the plugins settings documentation, or I believe I have.

    Reply
    • malihu
      Posted on May 15, 2018 at 23:48 Permalink

      Did you solve the issue? I just checked your page and the image link seems to work fine.

      Reply
  3. Steve D
    Posted on May 11, 2018 at 21:05 Permalink

    Hey!

    Love this plug-in – thanks for developing it!

    I have one slight issue with link highlighting … It seems like the navigation links are not getting the mPS2id-highlight class set after I’ve clicked on them.

    I do have “Enable on WordPress Menu links” ticked in the settings, and have tried de-selecting “Allow only one highlighted element at a time”, but no joy. I can confirm that the anchor tags in my nav menu have data-ps2id-api=”true” set.

    Can you tell me what I am missing please?

    Thanks,
    Steve

    Reply
    • malihu
      Posted on May 12, 2018 at 13:48 Permalink

      I can’t really say without seeing the page. Do the links have the _mPS2id-h class?

      Reply
  4. blake
    Posted on May 10, 2018 at 23:03 Permalink

    Hi there! I love the plugin and have used it on many sites. Thank you!

    I’m trying to link to the ‘Photos’ section on my Gallery page. When I click the ‘Photos’ link from the Gallery sub-menu, the Instagram feed is still loading, the page blinks a few times, and doesn’t scroll to the target row. I tried delaying the scroll in the settings, but that didn’t work. Wondering if there’s a way to call the scroll after the Instagram feed loads to avoid any issues?

    Best,
    Blake

    Reply
    • malihu
      Posted on May 11, 2018 at 01:14 Permalink

      You would need to develop a custom js script that will wait till all the (dynamic) feed images have loaded before initializing a “Page scroll to id” scroll event (you need a web developer for this).

      Another way would be to give the wrapper element of the gallery feed a fixed height value according to viewport in CSS. This can be tricky because the width of each image item is fluid (25%) and the height is set on-the-fly by some other script (probably the gallery script).

      Maybe you could do something like this:

      @media only screen and (min-width: 480px) { #sb_instagram { height: 0; overflow: hidden; padding-bottom: calc(75% + 50px); } }

      The above might work as long as you always load 12 Instagram images.

      Reply
      • blake
        Posted on May 14, 2018 at 15:55 Permalink

        Thank you very much! Great plugin!

        Reply
  5. Leslie Chapman
    Posted on April 24, 2018 at 14:40 Permalink

    Hi Malihu,

    Sorry if this is a totally basic and naive question, but how do you get the pages to scroll horizontally? I’ve checked the ‘horizontal’ box in the settings and for test purposes set up a couple of links and targets on a page but nothing happens – no right and left arrows, no horizontal scrolling, nothing.

    As I say, sorry if this is a bit basic.

    Reply
    • malihu
      Posted on April 27, 2018 at 23:23 Permalink

      Hello,

      In order to use horizontal scrolling, you need a horizontal layout theme.

      The plugin does not modify your theme template, i.e. it does not change your theme design from vertical to horizontal (it’s not really possible anyway).
      When you set the layout option to horizontal (in plugin settings), you simply tell the plugin that your page/theme’s layout is horizontal and it should scroll the x axis.

      You can see how a horizontal layout design looks (and works) in this demo.

      You’ll either need to find a horizontally laid-out theme or develop/design one yourself (if you’re a web developer).

      Hope this helps

      Reply
  6. Konrad
    Posted on April 19, 2018 at 17:48 Permalink

    Hi,
    first of all: Thanks for this awesome plugin!
    But I’m struggeling a bit, because I don’t know if this is even possible with your plugin.

    I know how to use shortcode to create clickable links with specific scroll durations in the editor, but I’m wondering whether I’m able to do adapt the duration, when I’m using #-links on buttons or images.
    Can I somehow use the ‘ps2id-speed-100’ in those situations?
    Regards and thanks in advance,
    Konrad

    Reply
    • malihu
      Posted on April 19, 2018 at 18:58 Permalink

      Hello Konrad,

      If you cannot add the class “ps2id-speed-100” to your standard/plain links in your editor (some page builder plugins may allow this), you’ll probably need to do it (manually) via javascript.

      If you can, add the following js code in your footer.php or wherever your theme allows you to add custom javascript:

      <script> (function($){ $(window).on("load",function(){ $("a[href='#section-3'],a[href='#section-5']").addClass("ps2id-speed-100"); }); })(jQuery); </script>

      We could change the above code to apply the speed on links that include a button and/or image element. Would this be what you need?

      Reply
    • malihu
      Posted on April 20, 2018 at 02:49 Permalink

      I should also mention that you could simply change the scroll duration in plugin settings to 100 and just add a class like ps2id-speed-900 to your menu items (you can add custom classes in wp menu items).

      This will make the default scroll duration/speed 100ms while your menu links will have a custom one set by the class name (e.g. 900ms).

      Reply
      • Konrad
        Posted on April 20, 2018 at 11:42 Permalink

        Hey,
        thanks for your response.

        Sadly, I couldn‘t really figure out how to use the javascript to get it like i want.
        (Not the most experienced guy here)

        Just for understandig… Would this script make it possible to have standard url links (on icons, buttons, etc.) while every single one of those has a different duration speed?

        BUT the hint with classes in my menu items was a good one. I think I can work with that.
        The good thing is that for example my Slider Revolution Plugin is able to add classes to buttons, so that works great.

        Greetings,
        Konrad

        Reply
        • malihu
          Posted on April 20, 2018 at 16:25 Permalink

          Yes, you could do it via javascript but if you can do it via the menu classes go with that. It’s (almost) always better to avoid extra javascript code if you can.

          For javascript, you’d also need a bit of experience to know what selectors to use. If you find that you cannot avoid adding the extra script, let me know 😉

          Reply
  7. Samuel
    Posted on April 17, 2018 at 16:21 Permalink

    Hi Malihu,

    Thanks for the great plugin… I’ve explored and combined it with a sticky module plugin, the whole used through the Divi builder.

    icet.fr/presentation/

    It looks fine and all – but if you check the link above on a computer screen (it’s deactivated on smaller screens), the active anchor-link item in the sticky menu switches some half a screen before the next anchor is actually crossed… I would like the active menu item to change when the module having the anchor is actually “crossed” but that sticky menu bar.

    I tried working on the off-set parameter – but whether I put -500, 0 or 1000 there I don’t see any change… I must be getting something wrong ?

    Thanks for your help ! Best,

    Samuel

    Reply
    • malihu
      Posted on April 18, 2018 at 01:43 Permalink

      Hello Samuel,

      This happens because a)you’ve enabled both “Allow only one highlighted element at a time” and “Keep the current element highlighted until the next one comes into view” options and b)you’ve set the target ids on the section title.

      For better/correct link highlighting I’d suggest the following:

      1)First, disable both options in plugin’s settings.

      2)In your page builder (I think you use Divi?) wrap each section in a row and move the id to the row.

      To make it more clear:

      Right now you have:

      – a widget with the section 1 title/image (that has the 1st target id)
      – a widget with the section 1 content

      – a widget with the section 2 title/image (that has the 2nd target id)
      – a widget with the section 2 content

      – a widget with the section 3 title/image (that has the 3rd target id)
      – a widget with the section 3 content

      Try to do it like this:

      – a row that has the 1st target id
      — a widget with the section 1 title/image (remove the id from here)
      — a widget with the section 1 content

      – a row that has the 2nd target id
      — a widget with the section 2 title/image (remove the id from here)
      — a widget with the section 2 content

      – a row that has the 3rd target id
      — a widget with the section 3 title/image (remove the id from here)
      — a widget with the section 3 content

      In short, place your widgets inside a row that will have the section id (and act as the target).
      This way, you don’t need to mess with any extra options and highlighting will work correctly.

      Let me know

      Reply
      • Samuel
        Posted on April 18, 2018 at 17:51 Permalink

        It worked, Malihu, thanks a lot 🙂

        All the best,

        Samuel

        Reply
  8. JP
    Posted on April 6, 2018 at 05:48 Permalink

    i am using the mesmerize theme which has a built in page builder. after installing the target link on the page and creating the custom link in the menu it works great……

    when i publish it again the target link disappears and then it doesnt work any more.

    Reply
    • malihu
      Posted on April 6, 2018 at 14:20 Permalink

      Don’t know if you already fixed this but the targets and links work for me when I visit your page.

      Reply
  9. Lester
    Posted on April 3, 2018 at 13:37 Permalink

    Hi Malihu, I have 2 ongoing pages and the “custom link” using URL/href works fine for 1 of the pages, but not so good for the other one.

    The issue is that the Top Menu button perfectly scrolls to the section/div of the homepage but if you are on another page and click any of the top menu buttons, it errors…

    I have used as recommended the following:

    Add the full address as your links URL/href value instead of just the hash with the id. For example, instead of #my-id, use http://my-site.com/page/#my-id or /page/#my-id etc. in the link’s URL.

    this is how it looks the item for the “Motos” on the Menu structure in the dashboard…

    Motos Custom Link Edit
    UR

    http://www.motorcrazygarage.es/#pg-45-1
    Navigation Label

    Motos
    MoveUp one Down one Under Inicio To the top Remove | Cancel

    url:

    http//www.motorcrazygarage.es (not working)
    http://www.ladiavla.es/ (works OK)

    Much appreciated any help u can offer with this issue… thanks

    Reply
    • malihu
      Posted on April 3, 2018 at 16:49 Permalink

      Hello,

      Some of your links (like “Historias de éxito” and “Contacto”) URL are not correct. For example, “Contacto” URL is:

      http://http://www.motorcrazygarage.es/#pg-45-6

      but it should be:

      http://www.motorcrazygarage.es/#pg-45-6

      Reply
  10. Ludolf Eisheuer
    Posted on April 1, 2018 at 14:44 Permalink

    Hello Malihu,
    I´m so sorry, but CSS is not my profession.
    Made another test and now are running all menu point to the section, but not axactly. In the following video you will see it:

    https://www.dropbox.com/s/fxo0rzpoxuw38fn/Springform%20Section%20scroll.wmv?dl=0

    <div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="eins" class="_mPS2id-t"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;">&nbsp;h1 Section 1</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="zwei" class="_mPS2id-t mPS2id-target mPS2id-target-first"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;">&nbsp;h1 Section 2</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="drei" class="_mPS2id-t mPS2id-target"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;">&nbsp;h1 Section 3</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="vier" class="_mPS2id-t mPS2id-target mPS2id-target-last"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;">&nbsp;h1 Section 4</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper tve_wp_shortcode"><div class="tve_shortcode_raw" style="display: none">___TVE_SHORTCODE_RAW__[ps2id id='help' target=''/] __TVE_SHORTCODE_RAW___</div></div>

    What can I do?
    Best regards Ludolf

    Reply
    • malihu
      Posted on April 1, 2018 at 16:31 Permalink

      Hi,

      I’m not sure if this is what you need but you can tweak page scrolling position using the “Offset” option in plugin settings. For example:

      Go to “Page scroll to id” settings and change the “Offset” option value to:

      40

      Save changes and test your page.

      The value 40 will offset page scrolling by 40 pixels, so if you need more/less you simply increase/decrease the number.

      Reply
  11. Ludolf Eisheuer
    Posted on April 1, 2018 at 14:27 Permalink

    Hello Malihu,
    made a second test with 4 Sections. The result is it runs only to the first Section under the Menu, but not to the other three sections.
    The Menu: eins – zwei – drei – vier
    Here the CCS:

    <div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="eins" class="_mPS2id-t mPS2id-target mPS2id-target-first"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;">&nbsp;h1 Section 1</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div><div id="eins" class="_mPS2id-t mPS2id-target"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;">&nbsp;h1 Section 2</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;">&nbsp;h1 Section 3</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper thrv-page-section tcb-window-width" style="width: 1202px; left: -61.2px;" data-css="tve-u-162808aae60"> <div class="tve-page-section-out"></div> <div class="tve-page-section-in tve_empty_dropzone" data-css="tve-u-162808a282d"><div class="thrv_wrapper thrv_heading" data-tag="h1"><h1 style="text-align: center;">&nbsp;h1 Section 4</h1></div><div class="thrv_wrapper thrv_heading" data-tag="h2"><h2 style="text-align: center;">h2 Your Heading Here</h2></div><div class="thrv_wrapper thrv_heading" data-tag="h3"><h3 style="text-align: center;">h3 Your Heading Here</h3></div><div class="thrv_wrapper thrv_text_element tve_empty_dropzone"><p style="text-align: center;">Enter your text here...</p></div></div> </div><div class="thrv_wrapper tve_wp_shortcode"><div class="tve_shortcode_raw" style="display: none">___TVE_SHORTCODE_RAW__[ps2id id='help' target=''/] __TVE_SHORTCODE_RAW___</div></div>

    What can I do or have to do?
    Best regards Ludolf

    Reply

Comments pages: 1 2 3 4

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