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


206 Comments

Post a comment

Comments pages: 1 2 3

  1. Alan
    Posted on December 16, 2017 at 15:43 Permalink

    Is it possible to have an offset for desktop versions and another offset for mobile versions based on a displays height and/or width?

    Thanks.

    Alan

    Reply
    • Alan
      Posted on December 16, 2017 at 15:52 Permalink

      I solved this issue by using the #masthead selector

      Reply
  2. J King
    Posted on December 7, 2017 at 19:58 Permalink

    PAGE SCROLL TO ID is awesome. Works like a charm for what I need. One question though…

    The site is: http://handhdelifranchising.com

    I have it set up with my MENU links to go to different parts o f a page. I’m using the ‘wrapper code’ provided:

    [ps2id_wrap id=’some-id’]
    your content…
    [/ps2id_wrap]

    BUT it does NOT work at all if you are NOT already on the SAME MENU tab. For example – if Im on the “Reasons To Invest” menu tab and want to go to “Our Technology” – which is under the “Opportunity To Grow” menu tab- you must first click on the “Opportunity To Grow” tab.

    Please let me know if this can be fixed and how.

    Thanks !

    Reply
    • malihu
      Posted on December 8, 2017 at 00:57 Permalink

      Hello,

      You simply need to add the full address as your links URL/href value instead of just the hash with the id (see this FAQ).

      For example, change the “Crunching The Numbers” link URL from:

      #numbers

      to:

      http://handhdelifranchising.com/opportunity-to-grow/#numbers

      Likewise, “6 Steps To Ownership” from:

      #ownership

      to:

      http://handhdelifranchising.com/reasons-to-invest/#ownership

      and so on…

      Reply
  3. Tomas Risberg
    Posted on December 7, 2017 at 16:23 Permalink

    Hi,

    Thank you so much for Page scroll to id. Sridhar Katakam helped me to make it work with the anchor links that the Zotpress plugin creates. I use Zotpress for scientific writing purposes. It handles references.

    I wonder if it would be possible to add some code to Page scroll to id for to create a so called “back-to-where-I-where arrow” from the reference list that Zotpress creates. If you click on an in-text citation in my pages you will now be slowly scrolled to the bottom, but you might then find it difficult to go back to where you were.

    It would be perfect to have a back-to-where-I-where arrow that is presented below the figure of the actual reference in the reference list. Do you think that would be possible?

    Regards,
    Tomas Risberg

    Reply
    • malihu
      Posted on December 7, 2017 at 18:33 Permalink

      Hi,

      There are 2 basic ways to do this:

      1)Enable “Append the clicked link’s hash value to browser’s URL/address bar” option in plugin settings. This way you can use the browser’s back button to go back to where you were before clicking the link.

      You can also create a link that goes back one browser history step:

      <a href="javascript:history.back()">Back</a>

      2)Create an additional target before each reference link. Then, create a “Go back” link below each reference paragraph that points to the target you created. For example:

      But why do then some robots benefit of sleep [ps2id id='back-to-3'/] [3]?

      3. …Neurophysiol Clin. 2004 Apr;34(2):59–70. [ps2id url='#back-to-3']Back[/ps2id]

      Reply
      • Tomas Risberg
        Posted on December 8, 2017 at 22:53 Permalink

        Thank you so much. I will contact the developer of Zotpress and ask if she wants to add support for this in the plugin.

        Reply
  4. Ciska
    Posted on November 28, 2017 at 18:16 Permalink

    Hi
    I have been using this plugin for some time without hassles. Recently changed my theme and now I have a problem using this from the WordPress menu.

    Your instructions above says “Click to edit each one of the links you’ve created and insert the ps2id value in “CSS Classes” field”

    Now I’m not too technical so help me with the ps2id and the text I have to add here. If my id is named #Travel, is this what I add to that CSS field?

    If I open my use my menu to go to one of these pages, it opens on that spot on the page but jumps right back to the top of the page again. I don’t think it sees my ps2id

    Some help will be appreciated
    Ciska

    Reply
  5. Tomasz
    Posted on November 28, 2017 at 09:38 Permalink

    Hello,

    Could You hellp me with adding to menu item to scroll to contact widget on the bottom of the page?
    Thank You in advance.
    Best regards

    Reply
    • malihu
      Posted on November 28, 2017 at 17:00 Permalink

      Give your link the URL:
      #text-4

      You should be able to see the id of any widget in Appearance > Widgets, so you can use this id as the target.

      Reply

Comments pages: 1 2 3

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