Smoothly Scroll Elements Into View - jQuery Smart Scroll

Smoothly Scroll Elements Into View - jQuery Smart Scroll

Smart Scroll is a small jQuery smooth scroll plugin which smoothly scrolls page sections into view by clicking the anchor links.

Also provides a scrollspy functionality that automatically highlights the active anchor link when the corresponding page section is scrolled into view.

Suitable for modern one page website & single page web application.

1. Add page sections to the webpage. Note that each section must have a unique ID as follows:

<div id="page1">Page 1</div>
<div id="page2">Page 2</div>
<div id="page3">Page 3</div>
<div id="page4">Page 4</div>
<div id="page5">Page 5</div>
...

2. Create nav links pointing to the page sections.

<nav>
  <ul>
    <li><a href="#!" data-scroll="page1">Page 1</a></li>
    <li><a href="#!" data-scroll="#page2">Page 2</a></li>
    <li><a href="#!" data-scroll="page3">Page 3</a></li>
    <li><a href="#!" data-scroll="#page4">Page 4</a></li>
    <li><a href="#!" data-scroll="page5">Page 5</a></li>
  </ul>
</nav>

3. Initialize the plugin and done..

(function ($) {
  "use strict";
  smartScroll.init({
    // all parameters are optional
})(jQuery);

4. Apply custom styles to the active menu item.

nav ul li.active {
  border-bottom: 2px solid dodgerblue
}

5. Customize the scrolling speed in milliseconds. Default: 500ms.

smartScroll.init({
  speed: 1000
})

6. Enable/disable the scrollspy functionality.

smartScroll.init({
  addActive: true, // default true
  activeClass: "active", // default active
})

7. Customize the distance from the top after scrolling. Default: 100px.

smartScroll.init({
  offset: 50
})

This awesome jQuery plugin is developed by MohamedElmdary. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 29.11.2018
  • Source

Whoops, looks like something went wrong.

(1/1) ErrorException

file_put_contents(): Only 0 of 246 bytes written, possibly out of free disk space

in Filesystem.php (line 122)
at HandleExceptions->handleError(2, 'file_put_contents(): Only 0 of 246 bytes written, possibly out of free disk space', '/home/p336588/web/ivanovdmitry.com/public_html/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php', 122, array('path' => '/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/hLiyAS58Pd6DrzbBqFEMlW6bunj9vCC5n3UXCefs', 'contents' => 'a:3:{s:6:"_token";s:40:"VTvLtRfHtQgTQyzSrGVh0EvtOcO9D2CYN6WU3jvW";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/smoothly-scroll-elements-into-view-jquery-smart-scroll";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 'lock' => true))
at file_put_contents('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/hLiyAS58Pd6DrzbBqFEMlW6bunj9vCC5n3UXCefs', 'a:3:{s:6:"_token";s:40:"VTvLtRfHtQgTQyzSrGVh0EvtOcO9D2CYN6WU3jvW";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/smoothly-scroll-elements-into-view-jquery-smart-scroll";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 2)in Filesystem.php (line 122)
at Filesystem->put('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/hLiyAS58Pd6DrzbBqFEMlW6bunj9vCC5n3UXCefs', 'a:3:{s:6:"_token";s:40:"VTvLtRfHtQgTQyzSrGVh0EvtOcO9D2CYN6WU3jvW";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/smoothly-scroll-elements-into-view-jquery-smart-scroll";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', true)in FileSessionHandler.php (line 83)
at FileSessionHandler->write('hLiyAS58Pd6DrzbBqFEMlW6bunj9vCC5n3UXCefs', 'a:3:{s:6:"_token";s:40:"VTvLtRfHtQgTQyzSrGVh0EvtOcO9D2CYN6WU3jvW";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/smoothly-scroll-elements-into-view-jquery-smart-scroll";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}')in Store.php (line 128)
at Store->save()in StartSession.php (line 88)
at StartSession->terminate(object(Request), object(Response))in Kernel.php (line 218)
at Kernel->terminateMiddleware(object(Request), object(Response))in Kernel.php (line 189)
at Kernel->terminate(object(Request), object(Response))in index.php (line 58)