Page scroll to id
Code examples & short tutorials
Using offsets
You can offset the scroll-to position via the offset
option parameter and/or via the data-ps2id-offset
html attribute.
offset
option parameter provides a general offset for all the links handled by the plugin. For example, setting offset value to 50 will stop page scrolling 50 pixels before reaching the target
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:50 });
data-ps2id-offset
attribute provides link specific offsets. The data attribute overwrites the offset
option and is useful when you need to set a different offset for a link
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a>
When the link above is clicked, it will stop page scrolling 100 pixels before reaching the target.
The offset value can be a positive or negative number, a string representing an element selector, a js or jquery object, a function or an array of values.
Integer
Offsets scroll-to position by x amount of pixels (positive or negative number). Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:50 });
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a>
$.mPageScroll2id("scrollTo","#id",{ offset:-50 });
String
Offsets scroll-to position by element height/width/position. Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:"#id" });
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset=".class-name">link</a>
js/jquery object
Offsets scroll-to position by element height/width/position. Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:document.getElementById("id") });
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:$("#id") });
Function
Offsets scroll-to position via function. Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:function(){ return offsetFn(); } }); function offsetFn(){ var myOffsetY=50, myOffsetX=100; return [myOffsetY,myOffsetX]; }
Array
Offsets vertical (y) and horizontal (x) scroll-to positions separately. Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:{"y":"50","x":"100"} });
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset='{"y":"#id","x":"0"}'>link</a>
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:{"y":document.getElementsByTagName("nav") || "ul.nav","x":"0"} });
User defined callbacks
You can trigger your own js function(s) by calling them inside onStart
and onComplete
option parameters. For example:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ onStart:function(){ myCustomFn1(); }, onComplete:function(){ myCustomFn2(); } }); function myCustomFn1(){ console.log(mPS2id.target.attr("id")); } function myCustomFn2(){ console.log(mPS2id.scrollTo.y); }
Returning values
The script returns the following values and objects
mPS2id.trigger
– the event which triggered page scrolling. Returned values: “selector” (click), “scrollTo” (method)mPS2id.clicked
– the element that was clicked as jQuery objectmPS2id.target
– the target element as jQuery objectmPS2id.scrollTo.y
– the vertical scroll-to position (pixels)mPS2id.scrollTo.x
– the horizontal scroll-to position (pixels)
Using Page scroll to id with deep linking plugins
There are many solutions for deep linking via javascript. The archive contains examples of using Page scroll to id with jquery.address and jquery-hashchange.
Normally, you’ll use plugin’s scrollTo method to trigger page scroll in hash-change events. If you need to disable the click events of selectors, set clickEvents
to false
$("a[rel='m_PageScroll2id']").mPageScroll2id({ clickEvents:false }); $(window).hashchange(function(){ var loc=window.location, to=loc.hash.split("/")[1] || "#top"; $.mPageScroll2id("scrollTo",to,{ clicked:$("a[href='"+loc+"'],a[href='"+loc.hash+"']") }); });
Dynamic content
When adding links and/or sections to your page dynamically (e.g. via ajax, js click events etc.) you may need to re-call mPageScroll2id function after your new content is fully loaded: $.mPageScroll2id();
This ensures the script will highlight your newly added links and targets correctly. If you don’t use plugin’s highlight feature, you can skip mPageScroll2id function call.
Links highlighting
The plugin highlights links automatically. When the page is scrolled (by clicking a link, mouse-wheel, touch-swipe etc.), the script checks if a target element is within the viewport and adds a highlight class (default: mPS2id-highlight
) to the corresponding link(s).
You can change the default highlight class to your own, through the highlightClass
option parameter
$("a[rel='m_PageScroll2id']").mPageScroll2id({ highlightClass:"highlighted-menu-item" });
By default, all links handled by the plugin are eligible for highlighting. Normally, you’d want to highlight only certain links such as those in navigation menus and not others like back-to-top. This can be achieved either by styling only the CSS selector you want, for example:
.menu a.mPS2id-highlight{ background: #ff0; }
or by inserting the selectors subset in the highlightSelector
option parameter
$("a[rel='m_PageScroll2id']").mPageScroll2id({ highlightSelector:".menu a" });
The plugin also provides a way of manually setting the highlight positions of each target element. If you need to set a specific area (in pixels) at which the highlight class is added, use the option parameter target_
followed by the number of your target within your document
$("a[rel='m_PageScroll2id']").mPageScroll2id({ target_1:{ from:0, to:-799 }, target_2:{ from:-800, to:-1599 }, target_3:{ from:-1600, to:-2399 } });
The target_
option gets the values { from, to, fromX, toX }
When multiple targets are within the viewport, more than one links will be highlighted simultaneously. If you don’t want this behavior, set forceSingleHighlight
option parameter to true
$("a[rel='m_PageScroll2id']").mPageScroll2id({ forceSingleHighlight:true });
Alternatively, you can target the first and last highlighted elements by using the classes .mPS2id-highlight-first
and .mPS2id-highlight-last
.
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.