Mobile-friendly Smooth Scroll To Plugin For jQuery - scrollTo

scrollTo is a configurable jQuery smooth scroll plugin which enables any trigger elements to smoothly scroll through your webpage with different animation speed and easing effects for mobile & desktop. Released under the LGPL-3.0 license.

How to use it:

1. Include the necessary JavaScript and CSS files on the webpage.

<link rel="stylesheet" href="scrollTo.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-scrollTo.js"></script>

2. Include the 'easing.css' for more easing effects (Optional).

<link rel="stylesheet" href="easing.css">

3. The typical usage of the plugin is to create a TOC navigation which allows the user to quickly scroll through your long web page. Note that you should use 'data-scrollto' attribute to specify the target content sections.

<ul class="nav">
  <li data-scrollto="whyuseit">#whyuseit</li>
  <li data-scrollto="basic">#basic</li>
  <li data-scrollto="tiles">#tiles</li>
  <li data-scrollto="phrase">#phrase</li>
  <li data-scrollto="semantic">#semantic</li>
  <li data-scrollto="howuseit">#howuseit</li>
</ul>

<div class="container" id="whyuseit">
  ...
</div>

<div class="container" id="basic">
  ...
</div>

<div class="container" id="tiles">
  ...
</div>

<div class="container" id="phrase">
  ...
</div>

<div class="container" id="semantic">
  ...
</div>

<div class="container" id="howuseit">
  ...
</div>

4. Initialize the plugin with default settings.

$(".nav").scrollTo();

5. Config the smooth scroll plugin when running on desktop.

$(".nav").scrollTo({
  speed: '1000',
  easing: 'linear',
  namespace: 'scrollTo',
  offsetTop: 50
});

6. Config the smooth scroll plugin when running on mobile.

$(".nav").scrollTo({
  mobile: {
    width: 768,
    speed: '500',
    easing: 'linear'
  }
});

---

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