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

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 object
  • mPS2id.target – the target element as jQuery object
  • mPS2id.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.

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

Pages: 1 2 3 4


537 Comments

Post a comment

Comments pages: 1 5 6 7

  1. giuse
    Posted on May 25, 2019 at 11:30 Permalink

    Hi,

    with the plugin update I got an issue

    with version 1.6.5
    link with href like http://www.xxxxxx.com/page/#id are no longer underlined, while they were with 1.6.4
    link with href like #id are still underlined, as they were with 1.6.4

    Reply
    • malihu
      Posted on May 25, 2019 at 12:10 Permalink

      This sounds like a css issue. If you post your site url, I’ll be able to check what happens and help.

      Reply
  2. Klaus Meschir
    Posted on May 24, 2019 at 08:59 Permalink

    Hi,

    i’m test your plugin for this website, but I have a problem. When I click the link in menu once, it scrolls to the anchor but it work only at the first time. The menu-link is deactivated after clicking.
    I changed in the settings “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target2 on and off but this has no effect for my problem. I use the WPBakery Plugin.

    Thanks for your help.

    Reply
    • malihu
      Posted on May 24, 2019 at 13:24 Permalink

      Hello,

      The problem you have does not come from “Page scroll to id”. It comes from your theme’s internal function for scrolling the page. The 2 scripts that do this are:

      ...themes/suffice-pro/assets/js/smooth-scroll.min.js
      ...themes/suffice-pro/assets/js/suffice-custom.min.js

      Try this:

      Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option. Save changes and test your page.

      If this doesn’t work, you’ll need to see if there’s an option in your theme settings to disable page smooth scrolling for same-page links.

      Let me know

      Reply
  3. Tomas Risberg
    Posted on May 22, 2019 at 21:22 Permalink

    Hi,

    After updating to Page scroll to id version 1.6.5 it scrolls too fast, and doesn’t stop the scrolling were it should stop it.

    This page illustrates the problem:

    https://silent.se/psy/overklighet

    Click on for example [1] and you see what happens.

    Reply
    • malihu
      Posted on May 22, 2019 at 21:36 Permalink

      Hi,

      Did you installed another plugin, e.g. auto-optimize?

      Reply
      • Tomas Risberg
        Posted on May 22, 2019 at 23:19 Permalink

        Thanks for your reply. Yes, at the same time as updating Page scroll to id I updated Autoptimize, WP Rocket and WordPress.

        Reply
        • malihu
          Posted on May 23, 2019 at 02:47 Permalink

          Can you flush/clear your site cache (wp rocket)?

          Reply
          • Tomas Risberg
            Posted on May 23, 2019 at 07:46 Permalink

            I have deleted the cache of Autoptimize and flushed the cache of WP Rocket. The problem remains.

Comments pages: 1 5 6 7

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