Page scroll to id
Frequently Asked Questions
-
Can I use the plugin to scroll an overflowed div?
No. Page scroll to id scrolls the entire page (the document’s root element) so it works correctly highlighting links, alongside deep linking plugins etc. with mouse and touch events.
-
Do you support Internet Explorer 7?
No and you shouldn’t either (IE7 usage is non-existent). If the script does work on IE7, it’s by pure luck.
-
When I click the link, nothing happens or page “jumps” to the target id without animation
Make sure your link has href value
#
with the id of the section you want to scroll-to (e.g.<a href="#id" rel="m_PageScroll2id">link</a>
) and a section with such an id exists in your page (e.g.<div id="id">target</div>
). Check your mPageScroll2id function selector(s) and verify that such links exist in your document. Check the path of jquery.malihu.PageScroll2id.min.js and make sure it’s loaded correctly. Verify that the jQuery version you’re using is 1.6.0 or higher. -
How do I make my links work from other/different pages?
To make your links work from any page, you need to add the full address in your links href (instead of just the hash with the id). For example, you’ll need to change
<a href="#id" rel="m_PageScroll2id">link</a>
to something like<a href="http://mysite.com/some-page/#id" rel="m_PageScroll2id">link</a>
. -
The page doesn’t scroll exactly where I want
The script scrolls the page to the top position of your target element. Your target’s top position does not include its margins, so make sure to check your element’s actual position via your browser’s developer tools and change your CSS if needed (e.g. adding paddings on your target). You can also offset the scroll-to position via the
offset
option parameter. -
The page doesn’t scroll to the very top
Your target element is probably not at the very top (check its position via your browser’s developer tools). If your link has href value
#top
and no target with idtop
exists in your page, the plugin will automatically scroll the page to the very top (the position of thebody
tag). -
How to prevent my fixed navigation menu overlapping the content?
Set your menu selector as the value of
offset
option parameter. For example, if you have a fixed menu with idnavigation-menu
, set offset to"#navigation-menu"
in order to stop page scrolling below it and avoid overlapping your content.$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:"#navigation-menu" });
-
Can I specify link specific offset values?
Yes, by adding the html attribute
data-ps2id-offset
to a link. For example,<a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a>
will offset scroll-to position by 100 pixels. Note thatdata-ps2id-offset
overwrites theoffset
option parameter. -
How do I scroll to an id when page loads?
Use the plugin’s scrollTo method in your script. For example:
$(window).on("load",function(){ $("a[rel='m_PageScroll2id']").mPageScroll2id(); $.mPageScroll2id("scrollTo","#id"); });
-
How do I highlight the links in my menu?
Use the
mPS2id-highlight
class in your stylesheet. This class is added by the script on links whose target element is considered to be within the viewport. Example:.menu a.mPS2id-highlight{ background: #ff0; }
-
More than one links are highlighted! How to highlight only the first one?
Use the
mPS2id-highlight-first
class in your stylesheet (instead of justmPS2id-highlight
). This class is added by the script on the first link whose target element is considered to be within the viewport. Example:a.mPS2id-highlight-first{ background: #ff0; }
Alternatively, you can use the
forceSingleHighlight
option parammeter by setting its value totrue
$("a[rel='m_PageScroll2id']").mPageScroll2id({ forceSingleHighlight:true });
-
How to keep my links highlighted when my target elements have 0 height?
Set the
keepHighlightUntilNext
option parammeter totrue
:$("a[rel='m_PageScroll2id']").mPageScroll2id({ keepHighlightUntilNext:true });
This will keep the highlighted element on until the next one comes into view.
-
How can I get the plugin to scroll to the current target on window resize?
Get the current target by its highlight class and call the
scrollTo
method to scroll to its id$(window).resize(function(){ var to=$(".mPS2id-target").attr("id"); $.mPageScroll2id("scrollTo",to); });
-
How can I get the plugin to scroll to URL location hash on window resize?
Get the location hash and call the
scrollTo
method$(window).resize(function(){ var loc=window.location.hash, to=(loc.indexOf("#/#")!==-1) ? loc.split("/")[1] : loc; $.mPageScroll2id("scrollTo",to); });
-
How to use the plugin with WordPress custom/native menus?
-
How to use the WordPress plugin without editing my theme’s markup?
-
What if my links have rel values already set?
You can add the
m_PageScroll2id
in your link’s rel attribute (along with the other values) and changemPageScroll2id
function selector to"a[rel~='m_PageScroll2id']"
-
Can I specify link specific animation duration/speed values?
Yes, by adding the class
ps2id-speed-VALUE
to the link or to link’s parent element (VALUE
indicating the animation duration in milliseconds). For example,<a href="#id" rel="m_PageScroll2id" class="ps2id-speed-700">link</a>
will set its animation duration/speed to 700 milliseconds. Note thatps2id-speed-VALUE
class overwrites thescrollSpeed
option parameter. -
Is it possible to scroll smoothly from/to different page(s)?
Yes, by adding an extra script posted here.
Plugin home Project on GitHub
Hello, the following error shows up in the admin area
Array to string conversion –> wp-includes/pluggable.php:2279 –> Plugin: page-scroll-to-id
Is there a workaround?
have a good day
Hello,
This is a known issue which will be fixed in the next plugin version (1.7.8). If you don’t want to wait, you can download the development version from the link below and use it replacing the current plugin version you have:
https://downloads.wordpress.org/plugin/page-scroll-to-id.zip
You can keep using the development version and update to version 1.7.8 when it becomes available, as you normally do.
Let me know if you need more help.