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

Page scroll to id for WordPress

Page scroll to id is a fully featured WordPress plugin for creating links that scroll the page smoothly to any id within the document. The plugin replaces browser’s “jumping” behavior with a smooth scrolling animation, when links with href value containing # are clicked.
It provides all the basic tools and advanced functionality for single-page websites, in-page navigation, back-to-top links etc. with features like: adjustable scrolling animation duration and easing, link and target highlighting via ready-to-use CSS classes, vertical and/or horizontal scrolling, scrolling from/to different pages etc.

Get started

The plugin works by “connecting” links with href/URL in the form of #my-id or http://my-site.com/page/#my-id to sections/elements within the document with an equivalent id attribute value (e.g. <div id="my-id">...</div>). Clicking such links will scroll the page smoothly to their target id position.

Get started by creating or setting-up your links. The plugin is enabled by default on WordPress Menu links (created in Appearance → Menus), so you can start adding custom links and set their URL to the id/target you want to scroll to (e.g. #my-id, /page/#my-id, http://my-site.com/page/#my-id etc.).
You can use id values that already exist in your theme or you can create your own id targets using plugin’s “Insert Page scroll to id target” button in wp post visual editor or the [ps2id] shortcode (e.g. [ps2id id='my-id'/]).

To create links within your content, use plugin’s “Insert/edit Page scroll to id link” button and/or shortcode (e.g. [ps2id url='#my-id']link text[/ps2id]) in wp post visual/text editor.
To enable the plugin on existing links, add the ps2id class or the m_PageScroll2id rel attribute to them, making sure the link’s href/URL value contains a hash (#) with the id of the section you want to scroll-to. In addition, you can simply add your links CSS selector (e.g. .menu-item a, a[href*='#']:not([href='#']) etc.) in “Selector(s)” field in plugin settings.

To highlight your links (or targets), use the classes provided by the plugin in your theme’s stylesheet or custom CSS. The default highlight class is mPS2id-highlight but you can set your own in the “Classes & highlight options”. For example, to style the highlighted link (the link whose target element is considered to be within the viewport), you could add in your CSS:

a.mPS2id-highlight{ 
    background: #ff0; 
}

or

.menu-item a.mPS2id-highlight{ 
    background: #ff0; 
}

for highlighting custom menus links only.

If you have a fixed-positioned/sticky menu which overlaps your target’s content when page scrolling is completed, insert your menu CSS selector or a fixed pixel value in the “Offset” field. For example, inserting #navigation-menu will offset the scroll-to position according to the height/width/position of the element with id navigation-menu. In the same manner, setting the “Offset” value to 100 will offset page scrolling by 100 pixels.

Plugin settings

Selector(s)

Use the Selector(s) field when you need to instruct the plugin to handle specific links. The value(s) should be anchor tags (a, i.e. links) in the form of strings that represent ways of choosing elements in the DOM (i.e. CSS selectors).
Each selector is separated by comma, so multiple selectors can be defined as: selector1, selector2, selector3 etc.

The default selector value is a[href*='#']:not([href='#']), meaning the plugin handles all links that have a valid hash value (e.g. #id) in their URL.
The default selector value prior to version 1.6.3 of “Page scroll to id” is a[rel='m_PageScroll2id'], meaning the plugin handles by default all anchor elements (a) with m_PageScroll2id rel attribute value.

Other selector examples could be: a[href*='#'] (links that contain # in their href/URL attribute), a[href='#my-id'] (links with href attribute value: #my-id), a.className (links with class: className).

To enable the plugin on any link that has a hash (#) in its URL, insert a[href*='#']:not([href='#']) as a single selector.

Other default selectors which the plugin is applied automatically include the class ps2id (actual selectors: .ps2id > a[href*='#'] and a.ps2id[href*='#']). This means that any link with a hash in its URL/href (e.g. #my-id) which has the class or is contained (direct children) within an element with the class ps2id will be handled by the plugin automatically.

To exclude specific links from being handled by the plugin (e.g. special tabs, accordions, toggles etc.), use the selectors are excluded field by adding the element selector(s) you want (separated by comma). The default excluded selectors value is set to: a[href^='#tab-'], a[href^='#tabs-'], a[data-toggle]:not([data-toggle='tooltip']), a[data-slide], a[data-vc-tabs], a[data-vc-accordion], a.screen-reader-text.skip-link which excludes most links that are used for toggling elements, tabs, accordions etc.

You can add your owns electors to exclude by separating each one with comma (,), for example:
a[href^='#tab-'], a[data-toggle], a.some-class, .tabs a

The option “Enable on WordPress Menu links” (enabled by default) enables the plugin automatically on custom links created in WordPress Menus.

Scroll duration

Scroll animation duration (i.e. scrolling speed) in milliseconds (1000 milliseconds equal 1 second). Lower values equal faster scrolling.

“Auto-adjust scrolling duration” option (enabled by default) lets the plugin fine-tune scrolling duration/speed according to target and page scroll position. This normalizes the animation duration in order to avoid short-distance scrolling taking too long (e.g. a page scroll of just 100 pixels will last shorter than the value specified in “Scroll duration”).

Scroll type/easing

Scroll animation easing type (i.e. the way the animation progresses at different points within its duration).
You can set different easing types according to page scrolling state: one that is applied when the page is idle (no scrolling currently running) and another that applies while page is scrolling (when a link is clicked while the page is animated/scrolling).
Enable “Force scroll type/easing” option when there’s conflict with outdated easing libraries added by themes or other plugins.

Scroll duration and easing demo

Scroll behavior

Always scroll smoothly when reaching the end of the page/document option adjusts scroll-to position so it does not exceed document length. For example, when scrolling to a target element that is at the bottom of the page, the scrolling animation stops smoothly at bottom of the page instead of “breaking” at an earlier point.
Enable Stop page scrolling on mouse-wheel or touch-swipe option if you want to stop page scrolling when the user tries to scroll the page manually (e.g. via mouse-wheel or touch-swipe).
Enabling Verify target position and readjust scrolling (if necessary), after scrolling animation is complete option, will auto-correct scrolling if the target’s position was changed while the page was scrolling. This event will fire one time only after scrolling animation is complete. This option is useful when document’s length changes according to scroll (for example when a menu becomes sticky after scrolling down the page and its previous state space gets zero).
Enable “Extend target position verification and scrolling adjustment for lazy-load scripts (images, iframes etc.) and changes in document’s length” when dealing with lazy-loaded images and iframes, changes in document’s length etc.

Page layout

Set page scrolling direction (i.e. restrict scrolling) to top-bottom (vertical) or left-right (horizontal) accordingly. For both vertical and horizontal scrolling select auto.
This option does not transform your theme’s templates layout (i.e. it won’t change your theme/page design from vertical to horizontal).

Offset

Offset scroll-to position by x amount of pixels or by selector. The offset value can a be a positive or negative number (indicating pixels), or a matching set of elements in your html (selector). For example, setting the value to 50 will stop page scrolling 50 pixels before reaching the target.
If you need to offset scrolling according to the height (or width) of some element (e.g. according to a responsive/sticky navigation menu), insert the element’s selector in the Offset field. For example, if you have a top fixed/sticky menu with id navigation-menu, set the offset value to #navigation-menu in order to stop page scrolling below it and avoid the menu overlapping your content.

To set different vertical and horizontal offsets (e.g. when Layout is set to auto), add comma separated values in Offset field, e.g. 100,50 (vertical offset 100 pixels, horizontal offset 50 pixels).

The plugin offers selector expressions in order to define more advanced offset values. Examples:

  • :fixed and :sticky expressions – Offset by element with id “some-id” and CSS position fixed or sticky: #some-id:fixed or #some-id:sticky
    Assuming vertical layout, the value above will offset scrolling according to the height of #some-id element (i.e. the element that has id some-id), but only when this element CSS position is fixed or sticky (i.e. when element is sticks to the viewport when scrolling the page). This is useful when for example you have a navigation menu that is sticky/fixed only above a specific viewport size (e.g. only on desktop).
  • :height() expression – Offset by element with class “some-class” and height equal to 100 pixels: .some-class:height(100)
    The value above will offset scrolling according to the height (on vertical layout) of .some-class element (i.e. the element that has class some-class), but only when this element height is exactly 100 pixels.
  • :width() expression – Offset by element with id “some-id” and width greater than 800 pixels: #some-id:width(>800)
    The value above will offset scrolling according to the height of #some-id element, but only when this element width is greater than 800 pixels. This is useful when having responsive navigation menus. For instance, you might have a responsive top sticky menu that switches to a “hamburger” menu when viewport is 800 pixels wide or less. Assuming the menu is as wide as the page/viewport, you’d only want to apply its height as offset when its width is greater than 800 pixels (i.e. when it’s not “hamburger” menu). Adding: #your-menu-id:width(>800) as the offset value will do exactly that.
  • Multiple expressions – Offset by element with id “some-id”, CSS position fixed and height between 50 and 100 pixels: #some-id:fixed:height(>50):height(<100)
    The value above will offset scrolling according to the height of #some-id element, but only when this element CSS position is fixed and its height is anywhere between 51 and 99 pixels.

The plugin can generate automatically a hidden element that can be used as the offset selector. If you enable Auto-generate #ps2id-dummy-offset element option, you can use the #ps2id-dummy-offset as the “Offset” option value and then in your CSS by giving it a height equal to the amount of offset you want.

For example, say you want to have an offset of 100 pixels on desktop and 50 pixels on smaller screens (i.e. mobile). You should enable the Auto-generate #ps2id-dummy-offset element option, set the value #ps2id-dummy-offset in the “Offset” option field and add the following to your CSS:

#ps2id-dummy-offset{
  height: 50px;
}
@media only screen and (min-width: 768px){
  #ps2id-dummy-offset{
    height: 100px;
  }
}

Highlight selector(s)

The matching set of elements (i.e. selectors) handled by the plugin, that will be eligible for highlighting. The value(s) should be anchor tags (a, i.e. links).

The plugin highlights by default all the links it handles. Using this field, you can specify which links should be highlighted and exclude the rest.
For example, assuming you have various links that scroll the page (e.g. menu links, back-to-top etc.) and you want only the menu links to get highlighted, you could insert:
.menu-item a[href*='#']

Classes & highlight options

The plugin adds special classes to the links and the target elements it handles when the following happen:

  • When a link is clicked, it gets the mPS2id-clicked class.
    You can change this class name to your own and you can use it in your CSS to style the clicked link. For instance:
    .mPS2id-clicked{ 
        background: #ff0; 
    }
    
  • When a link’s target element is within the viewport (i.e. visible on the screen), the link gets the mPS2id-highlight class and the target element gets the mPS2id-target class.
    You can change these class names to your own and you can use them in your CSS to style the highlighted link and target. For instance:
    .mPS2id-target{ 
        background: #ff0; 
    }
    
    .mPS2id-highlight{ 
        background: #ff0; 
    }
    

In addition, the plugin will add the above highlight classes with the -first and -last suffix (e.g. mPS2id-highlight-first, mPS2id-highlight-last) in order to differentiate multiple highlighted elements. This is useful when you need to style only the first or last of the highlighted links or targets in your CSS.
For example, if multiple links are highlighted at the same time, instead of using .mPS2id-highlight in your stylesheet, you could do:

.mPS2id-highlight-first{ 
    background: #ff0; 
}

An alternative way of restricting highlight to a single link/target and prevent multiple elements from being highlighted at the same time, is to enable Allow only one highlighted element at a time.

There are times when you need to keep at least one element (e.g. a menu link) always highlighted. Enable Keep the current element highlighted until the next one comes into view option if you need such functionality/behavior and your template/page is laid out in a way that at certain scrolling points there are no target sections visible on the screen (no links highlighted).

Enable Highlight by next target option when your target elements have zero height/width to improve highlighting behavior. This option is useful when you add id targets in your content via plugin’s buttons or the [ps2id id='some-id'/] shortcode, as it extends the scrolling range at which an element stays highlighted.

Disable plugin below

Set the viewport/screen-size in pixels, below which the plugin will be disabled. The value can be width or width,height.
For example, insert 1024 to disable plugin’s functionality when the viewport/window width is 1024 pixels or less. Insert 1024,600 to disable plugin when viewport width is 1024 pixels or less and viewport height is 600 pixels or less.
Please note that the values entered will match CSS media queries.

Leaving the field value empty or 0 (default) disables the option.

Administration

Check Display widgets id attribute in order to show the id attribute of each widget in Appearance → Widgets. This is a convenient way of finding existing id values in order to use them as links targets.
You can also create your own id targets in widgets via the “Page scroll to id target” widget.

Enable insert link/target buttons in post visual editor activates plugin’s buttons in WordPress visual editor toolbar. You can use these buttons to insert links and id targets in your content.

Advanced options

If another plugin or a theme script handles page scrolling and conflicts with “Page scroll to id”, try enabling Prevent other scripts from handling plugin’s links option. This option attempts to remove (on-the-fly) javascript click events by other scripts from the links. Please note that this might not work on some themes or plugins, as it depends on the way those scripts are attaching the link events.
You may set a specific selector for the option above using the Prevent other scripts from handling plugin’s links selector(s) field (it’s recommended to set a specific selector when using the “Prevent other scripts from handling plugin’s links” option).

Enable Normalize anchor-point targets to normalize/reset the CSS properties (height, line-height, border etc.) of anchor-point targets.

Enable Encode unicode characters on links URL when having links with encoded unicode characters (e.g. on internationalized domain names) in their href/URL (for proper highlighting of links).

wp-config options

define('PS2ID_MINIFIED_JS', false);
Use the PS2ID_MINIFIED_JS constant (permanent global variable) in wp-config.php to select which script files will be loaded on the front-end by the plugin. Adding the above in wp-config.php instructs the plugin to load the non-minified/development version of its scripts.


Build pages visually on the front end of your website

You’ve never built a WordPress website like this before. Divi by elegant themes is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor. It can be enjoyed by design professionals and newcomers alike, giving you the power to create spectacular designs with surprising ease and efficiency.
Learn more about Divi

Divi WordPress Theme Monarch Social Sharing Plugin


Plugin shortcodes

Plugin’s [ps2id] shortcode can be inserted directly in WordPress post editor (as with any WordPress shortcode) in order to create links and id targets in your content.

[ps2id url='#some-id']link text[/ps2id]

Attributes

  • url (required) – Link URL
    Examples:
    [ps2id url='#some-id']link text[/ps2id]
    [ps2id url='http://some-site.com/page/#some-id']link text[/ps2id]
    [ps2id url='/page/#some-id']link text[/ps2id]
    
  • offset (optional) – Link-specific offset (bypasses the general offset value in plugin settings)
    Examples:
    Offset scrolling by 100 pixels
    [ps2id url='#some-id' offset='100']link text[/ps2id]
    
    Offset scrolling by the height (or width for horizontal layout) of the element with id navigation-menu
    [ps2id url='#some-id' offset='#navigation-menu']link text[/ps2id]
    
    Offset vertical scrolling by 100 pixels and horizontal scrolling by 50 pixels
    [ps2id url='#some-id' offset='{"y":"100","x":"50"}']link text[/ps2id]
    
  • class (optional) – Link custom class(es)
    You can give the link one or more custom classes (separate multiple classes with space).
    Examples:
    [ps2id url='#some-id' class='class-a']link text[/ps2id]
    [ps2id url='#some-id' class='class-a class-b']link text[/ps2id]
    

    You can change the scroll duration/speed of the link (bypass the general scroll duration value in plugin settings) by adding a special class in the form of ps2id-speed-VALUE (i.e. ps2id-speed-600) with VALUE indicating the scroll duration in milliseconds (lower duration equals faster scrolling).
    Examples:

    [ps2id url='#some-id' class='ps2id-speed-400']link text[/ps2id]
    [ps2id url='#some-id' class='ps2id-speed-1300 class-a class-b']link text[/ps2id]
    
  • aria-label (optional) – Link aria-label attribute
    Examples:
    [ps2id url='#some-id' aria_label='Some text here']link text[/ps2id]
    

Target id shortcode

There are 2 target shortcodes:

1. Anchor-point target

[ps2id id='some-id'/]

2. Wrapper target

[ps2id_wrap id='some-id']
your content...
[/ps2id_wrap]

You can use the wrapper target ([ps2id_wrap]) when you need to wrap content in a target id (same as adding an id attribute to some content). Doing this gives you better control over the highlighting of associated links.
In addition, wrapper target allows you to include other shortcodes within its content, e.g.

[ps2id_wrap id='some-id']
content... [ps2id url='#another-id']link text[/ps2id] 
more content...
[ps2id id='another-id'/]
content... 
[/ps2id_wrap]

Attributes

  • id (required) – Target id
    Examples:
    [ps2id id='some-id'/]
    [ps2id_wrap id='some-id'] your content... [/ps2id_wrap]
    
  • target (optional) – The element that’ll be considered as the actual target for highlighting
    This can be useful when you need better highlighting for target elements that have zero dimensions.
    Examples:
    The associated link will scroll to #some-id element but will be highlighted as if its target is the next adjacent div (the div immediately following #some-id element)
    [ps2id id='some-id' target='#some-id + div'/]
    
    The associated link will scroll to #some-id element but will be highlighted according to #another-id element
    [ps2id id='some-id' target='#another-id'/]
    

Previous versions

Development version: https://downloads.wordpress.org/plugin/page-scroll-to-id.zip

Pages: 1 2


960 Comments

Post a comment

Comments pages: 1 2 3 10

  1. Frank
    Posted on July 7, 2017 at 13:09 Permalink

    Great plugin!
    One question: Why does the mobile version of the menu scroll off-screen in twenty-seventeen (child) theme with very minor child mods? Site url is https://bmlstudio.com. Appreciate any advice…
    Frank

    Reply
    • malihu
      Posted on July 7, 2017 at 13:55 Permalink

      Hello Frank,

      This happens because you’ve set an offset value (#site-navigation) which works for the top sticky navigation which exists only on desktop mode (breakpoint is set to 768px in your theme).

      On mobile (smaller screens) the top navigation is not sticky, so scrolling seems to land on the “wrong” position.

      You need to change plugin’s “Offset” value to apply only on desktop sticky navigation.

      Now, because the theme has zero indication when it switches from desktop to mobile navigation, you need to come up with a more complicated selector and use plugin’s selector expressions on the .navigation-top selector (which is the overall wrapper element of your top nav menu).

      So, I suggest inserting the following value in “Offset” option:

      .navigation-top:width(>767)

      Save changes and test.

      The selector above might seem like “black magic” but it’s fairly simple:
      It directs the plugin to offset scrolling by the height of .navigation-top element but only when its width is greater than 767 pixels (which matches exactly the 768px breakpoint of your mobile nav menu).

      Reply
      • Frank
        Posted on July 8, 2017 at 15:49 Permalink

        Malihu,

        Thank you. That solved the spacing problem. However, the menu still scrolls off the screen on mobile devices. How do I make it stick to the top of the screen?

        I sincerely appreciate your help.
        Frank

        Reply
        • Frank
          Posted on July 8, 2017 at 16:19 Permalink

          Malihu,

          Please disregard the last question. I fixed the scroll problem with a plugin.

          Thanks again.
          Frank

          Reply
  2. Gerardo
    Posted on July 7, 2017 at 12:27 Permalink

    Hello, thanks for this amazing plugin, i loved it. I have a problem, i am using this plugin as a guide for many topics in 1 post so people can have a nice navigation, everything is fine, the problem is that the page got very slow when i am using the plugin and when i am not using the page is fast again ( i mean the page where the plugin is working). Any tip or suggestion? The main problem is in mobile is very slow when i am navigating. Thanks!

    Reply
    • malihu
      Posted on July 7, 2017 at 13:02 Permalink

      Hi,

      I can’t really say without seeing your page in action. Can you send me a link?

      Reply
  3. Seb
    Posted on July 3, 2017 at 16:44 Permalink

    Is it possible to use this plugin to automatically scroll to a certain point in a page upon loading, without a user needing to click anything? I’m hoping to have the page scroll straight to post content below a large header image without the user needing to do anything.

    I understand that the main use for this plugin is to create links within the text so apologies if this is way off-topic.

    Reply
    • malihu
      Posted on July 4, 2017 at 03:46 Permalink

      Yes, the plugin by default will scroll to any target defined in URL hash.

      For example, loading a page/URL like this:
      http://some-site.com/some-page#some-id
      will scroll to #some-id target on page load.

      Reply
  4. Thu
    Posted on July 3, 2017 at 13:26 Permalink

    I have use this code for my website .nav-button a { border-radius: 10px; border: 2px solid darkorange; background: darkorange; color: #fff; padding: 5px 5px; }

    combine with <div id="contact-us"></div>

    You might refer it here:

    Reply
    • malihu
      Posted on July 3, 2017 at 13:54 Permalink

      Not sure what you need but the plugin seems inactive in your site. None of plugin’s scripts are included in your page(s). Is the plugin activated? Does your theme have the wp_head() and wp_footer() functions? These function are needed for plugins to enqueue frontend scripts.

      Reply
  5. GIsella
    Posted on June 30, 2017 at 00:37 Permalink

    Hi Malihu,
    The plugin works well for me with straight up links, but I am having trouble getting it to work in the menu. I enabled ‘on WordPress Menu links’ as recommended and added the class ps2id to the custom link. To view the troublesome menu link, Check ‘Contact’ in the nav…is it a theme issue? Any advice?

    Thanks for your awesome contribution!

    Reply
    • malihu
      Posted on June 30, 2017 at 10:31 Permalink

      Hello,

      Is the plugin active at the moment?
      You menu links seem to be handled by this script:

      ...plugins/smooth-scroll-by-wpos/assets/js/wp-ssbywpos-public.js

      which is part of another plugin (smooth-scroll-by-wpos).

      Try the following:

      1
      Activate “Page scroll to id”.

      2
      Go to “Page scroll to id” settings and insert your mega-menu links selector in “Selector(s)” field. Change “Selector(s)” field value to:

      a[rel='m_PageScroll2id'], .menu-item a[href*=#]:not([href=#])

      This is needed as the mega-menu probably prevents “Enable on WordPress Menu links” option from working (or the ps2id class from applying).

      3
      Enable “Prevent other scripts from handling plugin’s links” option to avoid conflicting with other plugins/scripts (e.g. smooth-scroll-by-wpos).

      4
      Save changes and test your links 😉

      Hope this helps

      Reply
  6. JOe
    Posted on June 29, 2017 at 18:04 Permalink

    I would like to know how to disable the highlight and highlight first options. My WordPress template already has it. What is happening is when I add the shortcode the color of my hightlight stays on. so when you mouse over it does not change. it is still solid

    Reply
    • malihu
      Posted on June 29, 2017 at 19:56 Permalink

      If you didn’t add any CSS to style plugin’s .mPS2id-highlight class(es), then the plugin does not affect your links colors, display etc. in any way. In other words, there’s nothing really to disable.

      The colors and hover behavior of your links comes from your theme’s CSS.

      If you can post your link I’d be happy to check it and help if I can.

      Reply
  7. Mariecke
    Posted on June 28, 2017 at 15:10 Permalink

    Hi,

    I installed your plugin and it works. The only little problem I have is:

    when I click in the menu on a page it scrolls to that page but doesn’t stop at the beginning but somewhere in the middle of the page. Do you know what I have done wrong?

    Kind Regard,
    Mariecke

    Reply
  8. Dan
    Posted on June 20, 2017 at 18:54 Permalink

    I love this plug in! Smooth scrolling makes my website stand out against others. I have one issue on my website, when I click on a portfolio picture on the homepage it will load the portfolio page and scroll down. That’s working perfectly! But when i’m on the portfolio page and I click on a picture it jumps down to the project instead of scrolling smoothly. I changed the links from #project_name to http://www.late4lunch.com/portfolio/project_name# and it didn’t fix the issue. I’m stumped.

    Thanks for an amazing plugin and support!
    Dan James

    Reply
    • malihu
      Posted on June 20, 2017 at 22:42 Permalink

      The “jump” happens because you need to enable the plugin on those portfolio links.
      Go to plugin settings and change the “Selector(s)” value to:
      a[rel='m_PageScroll2id'], .project-item a
      Save changes and test your links again 😉

      Adding your portfolio links selector (.project-item a) to “Selector(s)” field, tells “Page scroll to id” that it should handle those links.

      FYI: The plugin is designed for absolute control rather than simple convenience. Its default option values are set so that there’s zero chance of it breaking or messing with other plugins or theme functionality. It will handle navigation menu links out-of-the-box but for other (existing) links (i.e. links not created by the plugin itself) you need to explicitly instruct it to handle them.

      Reply
      • Dan
        Posted on June 21, 2017 at 15:34 Permalink

        Malihu, that worked perfectly! Thanks a ton for the quick response!

        Reply
  9. Nata
    Posted on June 18, 2017 at 13:50 Permalink

    Hi there,
    I love this plugin, thanks! Just trying to solve one simple issue, similar to Jeremy’s question above (Page scroll to id keeps reloading and scrolling from the top of the page and I want to scroll from the element I’m on…)
    I initially had just Ids in the custom links (#work) and it work perfectly on the home page but they were not working from other pages on the site.
    Now if I enter the full URLS (http://nataliapelaez.com/#contact) the links work perfectly from other pages but reload on the home page and scroll from the top instead of from the element I’m on .
    I tried to solution you said, removing the www but nothing seemed to change.
    Any ideas how I can fix this?
    Thanks so much for your help!

    Reply
    • malihu
      Posted on June 18, 2017 at 22:17 Permalink

      Easy to fix 😉

      This happens because your web server is configured to always use the www subdomain. So when you go to http://nataliapelaez.com/#contact it redirects to http://www.nataliapelaez.com/#contact.
      For browsers and programs these are 2 different URL and that’s why the page reloads.

      Just change your links URL to include the .www part. For example, change “Contact” link URL from:
      http://nataliapelaez.com/#contact
      to:
      http://www.nataliapelaez.com/#contact
      and everything will work as expected.

      PS. Nice logo by the way 🙂

      Reply
      • Natalia Pelaez
        Posted on June 19, 2017 at 03:13 Permalink

        Brilliant!!!! Thanks so much it worked 🙂

        Reply
  10. [email protected]
    Posted on June 14, 2017 at 02:45 Permalink

    Hi. I’m having trouble making the “about” menu item scroll to that section on the home page. I tried identifying the div in the elements window — it needs to jump to a section within a widget. Please let me know how to do this. Thanks in advance.

    Reply
  11. Paul
    Posted on June 12, 2017 at 20:04 Permalink

    Hi,

    The plugin works perfect on safari, but i have a problem with firefox and chrome. “Lokalizacja” and “Kontakt” in main menu are linked with /#id. On home page its works normal, but when i on “o firmie” page, and clicked “lokalizacja” in menu, there is a bug – menu and revolution slider dissapears. The problem only occurs on chrome and firefox.

    My site http://kd.mooka.pl

    Reply
    • malihu
      Posted on June 12, 2017 at 20:26 Permalink

      Hello,

      I think the issue might be a theme function which conflicts with “Page scroll to id”. Try adding a small delay for scrolling to target on page load:

      Go to “Page scroll to id” settings and scroll to “Links behavior” section.
      Change “milliseconds delay for scrolling to target on page load” option to 300
      Save changes and check if the issue is fixed.

      Reply
      • Paul
        Posted on June 12, 2017 at 20:48 Permalink

        Thanks for fast reply. I’ve changed, but not working.

        Reply
        • malihu
          Posted on June 12, 2017 at 21:02 Permalink

          If it’s not working then the problem must be coming from the theme itself (not from “Page scroll to id”).
          You can test this by temporarily deactivating “Page scroll to id” and test your links. If this issue still happens, then the problem is with the theme.

          Reply
          • Paul
            Posted on June 12, 2017 at 21:23 Permalink

            When i deactivated plugin i can’t move from menu to specific target on page but the links works normal. On safari everything works perfect with plugin…

        • malihu
          Posted on June 13, 2017 at 00:56 Permalink

          Go to plugin settings and disable (uncheck) the following options:
          Scroll from/to different pages
          Enable different pages scrolling on all links
          Check if the problem remains.

          Reply
          • Paul
            Posted on June 13, 2017 at 12:13 Permalink

            When i uncheck this options the same problem occurred this time on safari.

        • malihu
          Posted on June 13, 2017 at 17:41 Permalink

          The issue must be with your theme (or some other plugin?). I just tested (on Chrome) going to a target that’s not handled by any link and the same issue happens.

          Go to the following URL:
          http://kd.mooka.pl/#footer
          and you’ll see that the content, slider etc. disappear.

          The #footer target is not related to “Page scroll to id” and it’s not related by a link handled by the plugin. Still, it produces the same problem.

          This means that the issue has something to do with the theme itself (maybe the way it preloads the page?). You should probably contact the theme developer(s) about it.

          If you want, do the above test with and without “Page scroll to id”:

          1. Temporarily deactivate “Page scroll to id”
          2. Open a new browser tab and go to http://kd.mooka.pl/#footer
          3. See if content, slider etc. disappear

          Reply
  12. Eren
    Posted on June 11, 2017 at 16:32 Permalink

    hi,

    thank for this plug-in, it works well but I have one problem.

    When I click related menu item second time, page disappear. How can I fix this issue?

    thanks in advance.

    Reply
  13. Henri
    Posted on June 11, 2017 at 15:39 Permalink

    Hi!

    I’m having a difficulties with scroll to id plugin. As I use it to scroll trough my music lyrics then it’s been very handful and great, but now it is not working correctly.

    Problem is that when ever try to load the page kohvipaus.eu/luurika , then it does not make the links active, but when I scroll down a bit with mouse then links on the navigation get active. I don’t know what is wrong. If you could tell me it would be awesome! So problem is that I want to get it working from the moment I load the page to select song for example “soojusest” and it scrolls to it. But as for now it does it only when I manually scroll down a little bit and then I can click it and it starts to scroll.

    Thanks,
    Henri

    Reply
    • malihu
      Posted on June 11, 2017 at 19:27 Permalink

      Hi,

      I just checked your link and cannot scroll or interact with it (no scrollbar at all)?

      Reply
  14. Hindiarcha
    Posted on June 7, 2017 at 10:18 Permalink

    Hi malihu, I have searched over wordpress plugin page but did not find a suitable plugin for auto scroll, can you please suggest me one for my news website

    Reply
  15. Jeremy
    Posted on June 7, 2017 at 01:42 Permalink

    Page scroll to id keeps reloading and scrolling from the top of the page and I want to scroll from the element I’m on…If I’m on panel 2 it reloads…shows the top of the page then scrolls all the way down through all the sections that have already been shown…any advice would be greatly appreciated!

    Reply
    • malihu
      Posted on June 7, 2017 at 02:08 Permalink

      Just remove the www. part from your links URL. For example, change “Our Services” URL from:
      http://www.aeonweddings.com/#panel1
      to:
      http://aeonweddings.com/#panel1

      The reloading happens because your web server is configured to always redirect to the domain (aeonweddings.com) without the www subdomain.
      For the browser, site.com/page and www.site.com/page are 2 different URL.

      Reply
  16. Rob
    Posted on June 1, 2017 at 06:21 Permalink

    Hi there,

    I have installed the default 2017 wordpress theme and starting from scratch. I’ve installed your plugin and it works great. Thank you for this!

    What I’m interested in is the ability to have a down arrow icon over the lower right of the initial image, to let users know they can either click that or scroll down. Does your plugin have this ability to have an arrow on the bottom right of the default page?

    Thanks so much, it works really well. Rob

    Reply
    • malihu
      Posted on June 1, 2017 at 14:02 Permalink

      Not really. The design of elements (i.e. arrow links) is out of plugin’s scope. “Page scroll to id” handles the smooth scrolling functionality and creates only targets and plain links that you can style via CSS.

      Reply
  17. Domenico
    Posted on May 17, 2017 at 17:55 Permalink

    Hello, first of all, thank you for the plug in.
    I would ask for a question.
    It would be possible to make a trasparent link on the image as in my home page?

    For example a text as “about us”?

    Reply
  18. Nidhi Mangal
    Posted on May 15, 2017 at 04:06 Permalink

    Hi there,

    I am using your plugin on this site http://www.thebalancesheet.com.au/ to scroll the page smoothly to the link’s target within a page.

    The plugin is working good if the url with /#some-id only when entered manually in the url. However, on click the menu is not scrolling the page smoothly. I read the question in the FAQS “How to make the plugin work with WordPress Menu links?” and did exactly what you mentioned there. But that’s not working either. Can you suggestion what I am doing wrong?

    Many Thanks
    Nidhi Mangal

    Reply
    • malihu
      Posted on May 15, 2017 at 15:13 Permalink

      Hi,

      I just checked your link and scrolling works as expected. Did you fix it or need more help?

      Reply
  19. Theo
    Posted on May 6, 2017 at 22:05 Permalink

    Hello! First of all: very useful plugin, thanks!

    I have a fixed menu on the top and i want to use a 100px offset, but it doesn’t work!
    Defining a selector doesn’t work also =/

    Could you help me?

    Thanks!

    Reply
    • malihu
      Posted on May 7, 2017 at 21:39 Permalink

      I can’t really help unless I see your page/site.
      Your theme might be using its own way of scrolling in-page links. If you can post your link I’d be happy to help.

      Reply
      • Theo
        Posted on May 11, 2017 at 00:27 Permalink

        Thanks, Malihu!

        This is my devlopment link: http://tandainterativa.com.br/~aespecialistacom/

        I set the offset to “-500” in the plugin’s config page.

        Reply
        • malihu
          Posted on May 11, 2017 at 01:38 Permalink

          It seems that the plugin is not enabled on your menu links. This is probably because your theme has its own custom walker function for the menu which prevents “Enable on WordPress Menu links” option from working.

          The quickest way to fix this is go to plugin settings and enter your menu links selector in “Selector(s)” field:
          a[rel='m_PageScroll2id'], .menu-item a

          Alternately, you can add plugin’s class to your menu links:
          http://manos.malihu.gr/page-scroll-to-id-for-wordpress-tutorial/#menu-links-alt-section

          Let me know

          Reply
          • Theo
            Posted on May 11, 2017 at 03:19 Permalink

            Setting the selector as “a[rel=’m_PageScroll2id’], .menu-item a” worked!

            Thanks a lot, Malihu!!

        • malihu
          Posted on May 11, 2017 at 04:18 Permalink

          Awesome. Glad I helped 🙂

          Reply
          • Théo
            Posted on May 13, 2017 at 04:27 Permalink

            Actually that didn’t worked! =(

            Each web browser is stopping the scroll in one different position hahaha

            Guess what’s causing this?

            Thanks again!

        • malihu
          Posted on May 13, 2017 at 09:08 Permalink

          In plugin settings, try enabling “Prevent other scripts from handling plugin’s links” option and test/check again.

          Reply
          • Theo
            Posted on May 18, 2017 at 01:15 Permalink

            Thanks again, that worked!

            But for some reason OPERA is the only one that’s still bugging.

  20. aidan
    Posted on April 16, 2017 at 22:58 Permalink

    First of all, thank you. Great plugin. Works awesomely:)

    I wonder if this plugin (or another one) would be able to do the following:

    I would like when my users scrolled down, on keypad or mouse, that my site would smooth scroll to my next row (container) automatically?

    I have seen some sites do this. Sorry I can’t get an example right now.

    Many thanks,

    Aidan

    Reply
  21. Muslima
    Posted on April 13, 2017 at 18:02 Permalink

    HI! THANK YOU TO THE PLUGIN
    BUT I HAVE A QUESTION…
    When you click on the menu item, it will scroll, but the pressed item doesn’t change color to the hovering color. Can you say what should I do?
    PLEASE HELP ME
    You can see my site there

    Reply
    • malihu
      Posted on April 13, 2017 at 18:19 Permalink

      Hello,

      Use plugin’s highlight class(es) in your CSS to style the link:

      #menu-main > li > a.mPS2id-highlight { /* the styling you want */ }

      Reply
      • Muslima
        Posted on April 14, 2017 at 14:03 Permalink

        I opened style.css in Editor and put this:

        #menu-main li a.mPS2id-highlight {
        background-color:#2f3392;
        color:#2f3392;
        }


        But it doesn’t work

        PLEASE HELP ME

        Reply
        • malihu
          Posted on April 14, 2017 at 18:04 Permalink

          What do you mean not working?
          It works for me (on your first 2 menu links). I see the link color changing to blue as I scroll into its section.

          Reply
  22. Sabine
    Posted on April 4, 2017 at 18:02 Permalink

    Thanks for your great plugin, it’s the only one that seems to work at all for me, except for one thing: the smooth scrolling only works once. If I click a second link from the menu, it jumps instead of scrolling. Are you able to help me with this? It’s the website in the comment URL.
    Thanks a lot!
    Sabine

    Reply
    • malihu
      Posted on April 4, 2017 at 21:16 Permalink

      Hello,

      The plugin works only on links (<a /> tags) with a valid href attribute value. Your menu is a non-link, dropdown menu (<select /> tag) which jumps to page sections via custom javascript code set by its developer.

      In order to make “Page scroll to id” work with your select menu you’d need to unbind its javascript and create a custom script which will use plugin’s scrollTo method within a jQuery change event (.change()). In short, it’d need custom js work.

      The smooth scrolling seems to be working on the first selection because it goes to a different page/URL and the plugin is able to scroll the page when it first loads as it takes the target value (#id) from the URL itself.

      Reply
      • Sabine
        Posted on April 6, 2017 at 14:03 Permalink

        Thanks a lot for your great explanation! With this information I can go on! Also a thousand thanks for being that fast!!!

        Reply
  23. Olga
    Posted on March 28, 2017 at 23:59 Permalink

    I’ve installed and activated Page Scroll To ID plugin, but 2 “scroll to id” icons aren’t showing in my editor.
    How can I fix this?

    Reply
    • malihu
      Posted on March 29, 2017 at 07:53 Permalink

      Hello,

      Do you use SiteOrigin page builder or something similar? Their widgets don’t allow custom buttons/icons in the editor.

      Maybe you can use plugin’s shortcodes or plain HTML to create your targets and/or links like described in plugin’s tutorial(?)

      Reply
  24. my
    Posted on March 27, 2017 at 11:47 Permalink

    Hi!
    Your plugin is awesome and often work without problem. But on this site that i am working on for a client seems to jump after smooth scroll. And in safari it glitches?

    Thanks for your time!

    Reply
    • malihu
      Posted on March 27, 2017 at 12:43 Permalink

      Hi,

      The site in question is the one you added in the comment URL correct?

      I checked it and the issues your having come from another script (...themes/kalium/assets/js/joinable.min.js) which handles the links and page scrolling while preventing “Page scroll to id” from doing its thing.

      Go to “Page scroll to id” settings and enable “Prevent other scripts from handling plugin’s links” option. This should fix the problem(s).

      Let me know

      Reply
  25. Diyan
    Posted on March 24, 2017 at 14:38 Permalink

    Hi, I like the ease of use of this plugin.

    I wonder if there is a way to trigger a different offset value on mobile devices? Best case scenario would be: being able to set the trigger point (in px) too.

    D.

    Reply
    • Diyan
      Posted on March 24, 2017 at 14:40 Permalink

      oh my, I should have read the comments first! sry for bothering you.

      Reply
  26. Olivia
    Posted on March 21, 2017 at 03:36 Permalink

    I add the id into each page, and then create a custom link to add to the menu – and i made sure that i have “scroll to/from” different pages highlighted – and i still cannot get it to scroll smoothly throughout the website from page to page.

    Reply
    • malihu
      Posted on March 23, 2017 at 01:26 Permalink

      Please post a link with the problematic page so I can check it and help. Also make sure your links URL matches exactly the URL you see in browser’s address bar (e.g. https vs http, if www part is required etc.).

      Reply
  27. Carmen
    Posted on March 11, 2017 at 23:48 Permalink

    Hi, I´ve been using your Scroll to Id plugin for around a year and it works great, thank you!

    My only question is… I have a fixed to top navigation and I am using 90px offset which is perfect for desktop. Since I don´t have a fixed top navigation for mobile, I would like to know if I can reduce to half (45px) of the offset pixels only on mobile, maybe through a guery?
    Thanks

    Reply
    • malihu
      Posted on March 12, 2017 at 01:02 Permalink

      Hello,

      You can’t use a query for a fixed offset value (e.g. 90 pixels).

      What you can do, is use the offset expressions on a non-fixed selector-based offset value.

      These expressions restrict offset to certain conditions like only when the element is fixed, when the element is above a specific width etc.
      For example in your case, you could set the offset to be the height of your logo image but only when the top menu is sticky/fixed:

      nav.sticky:fixed .logo > img

      Insert the above value in plugin’s “Offset” (instead of 90) and test if it works in your layout.

      Reply
  28. Curtis
    Posted on March 9, 2017 at 18:38 Permalink

    The plugin is working great with just one glitch. The last item on my menu and page is Contact. It won’t highlight. Suggestions?

    Thank you!!

    Reply
    • malihu
      Posted on March 9, 2017 at 19:33 Permalink

      Hi,

      You have both “Highlight by next target” and “Allow only one highlighted element at a time” options enabled. Try disabling “Highlight by next target”.

      Reply
  29. Roman
    Posted on March 2, 2017 at 22:06 Permalink

    Hi , “Is “Enable insert link/target buttons in post visual editor” option checked?”
    there is no problem!
    On my website 4 plugin: Easy Modal ,Contact Form 7 , Page Builder, TineMCE . if they could affect the operation of your plugin?
    Tried in different modes editor button in which there is no (

    Reply
  30. Roman
    Posted on March 2, 2017 at 20:20 Permalink

    Hey, help me please. I installed your plugin “page scroll to id”, but it does not work ((no button “Insert Page scroll to id targe” in a text editor. Tell me how to fix it?

    Reply
    • malihu
      Posted on March 2, 2017 at 20:36 Permalink

      It’s impossible for me to know what happens and help without access to your site or additional info.

      Is “Enable insert link/target buttons in post visual editor” option checked?
      Do you use other plugins that may affect post/page editor toolbar?
      Is your editor switched to “text” or “visual”?
      What editor does your theme use (standard, custom etc.)?

      Reply
      • Roman
        Posted on March 2, 2017 at 22:07 Permalink

        Hi , “Is “Enable insert link/target buttons in post visual editor” option checked?”
        there is no problem!
        On my website 4 plugin: Easy Modal ,Contact Form 7 , Page Builder, TineMCE . if they could affect the operation of your plugin?
        Tried in different modes editor button in which there is no (

        Reply
        • malihu
          Posted on March 3, 2017 at 16:02 Permalink

          Ah yes. “Page builder” removes most 3rd party plugin buttons from its widget editor. That’s why you don’t see them.

          Instead of the buttons, you can use plugin’s shortcodes. The shortcodes have the same functionality as the buttons but you have to add them manually as text.

          FYI I’ll try to contact the “SiteOrigin” guys and ask them to allow “Page scroll to id” buttons in their editor.

          Reply

Comments pages: 1 2 3 10

Post a comment

Cancel reply

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

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

css.php