Animated Page Scrolling To Specific ID Within Document With jQuery

Page Scroll To ID is a jQuery plugin for creating anchor links that allow you to scroll vertically and horizontally to the corresponding sections of your page using custom animations and smoothing effects.

For each section, there is a “back to top” link and a “next” link that allows scrolling to the next section. Ideal for creating a beautiful, modern one-page website layout. Check out the demo pages in zipping for more advanced uses.


  • Auto-adjustable animation speed
  • Advanced animation relaxation
  • Vertical and/or horizontal scrolling
  • Highlight your links and goals with ready-to-use chapters
  • Scroll to automatically adjustable mode
  • Advanced shifting to scroll position (in pixels, by element selector, linking offsets specified, etc.)

How to make use of it:

1. Create a set of anchor links with the href attribute indicating the identifier corresponding to your departments.

<nav id="nav-menu">
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>

2. Create the main content.

<div id="content">

  <section id="section-1">
    <div class="content">
      <h2>Section 1</h2>
      Your Content Goes Here
      <hr />
      <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> 

  <section id="section-2">
    <div class="content">
      <h2>Section 2</h2>
      Your Content Goes Here
      <hr />
      <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> 

  <section id="section-3">
    <div class="content">
      <h2>Section 3</h2>
      Your Content Goes Here
      <hr />
      <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> 


  <section id="section-x">
    <div class="content">
      <h2>Section x</h2>
      Your Content Goes Here
      <hr />
      <a href="#top">&uarr; Back to top</a> <a href="#" rel="next">&darr; Next section</a> 


3. Include the jQuery library and jQuery Page and scroll to the ID plugin at the end of the document.

<script src="/path/to/jquery.min.js"></script> 
<script src="/path/to/jquery.malihu.PageScroll2id.js"></script> 

4. Call the plugin with options.


    $("#nav-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
      highlightSelector:"#nav-menu a"

      var to=$(this).parent().parent("section").next().attr("id");


5. All default settings and callback functions.


  /* scroll animation speed in milliseconds: Integer */

  /* auto-adjust animation speed (according to target element position and window scroll): Boolean */

  /* scroll animation easing when page is idle: String */

  /* scroll animation easing while page is scrolling: String */

  /* end of page "smooth scrolling" (auto-adjust the scroll-to position when bottom elements are too short): Boolean */

  page layout defines scrolling direction: String 
  values: "vertical", "horizontal", "auto" 

  /* extra space in pixels for the target element position: Integer */

  /* highlight the main/default selectors or insert a different set: Boolean, String */

  /* class of the clicked element: String */

  /* class of the current target element: String */

  /* class of the highlighted element: String */

  /* force a single highlighted element each time: Boolean */

  /* keep element highlighted until next (one element always stays highlighted): boolean */

  /* highlight elements according to their target and next target position (useful when targets have zero dimensions). Non "auto" layouts only: boolean */

  /* disable plugin below [x,y] screen size: boolean, integer, array ([x,y]) */

  /* enable/disable click events for all selectors */

  /* append hash to URL/address bar */

  /* enable/disable the default selector: Boolean */

  /* highlight elements now and in the future */

  /* set specific live selector(s): String */
  /* user callback functions: fn */


6. Scroll the page to a specified location within the document.


jQuery Plugin For One Page Navigation Plugin, Page scroll to id Plugin/Github

See Demo And Download

Official Website(malihu): Click Here

This superior jQuery/javascript plugin is developed by malihu. For extra Advanced Usages, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…