원페이지 제이쿼리 네비게이션 스크롤 이벤트

데모페이지

https://www.jqueryscript.net/demo/jQuery-Plugin-For-One-Page-Navigation-Plugin-Page-Scroll-To-ID/examples/

jQuery Page Scroll To ID Basic Demo

파일 다운로드 페이지

https://www.jqueryscript.net/layout/jQuery-Plugin-For-One-Page-Navigation-Plugin-Page-Scroll-To-ID.html

jQuery Plugin For One Page Navigation Plugin - Page Scroll To ID

 

example

<nav id="nav-menu">
  	<ul>
      <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>
	</ul>
</nav>

 

 

<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>
    </div>
  </section>
  <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>
    </div>
  </section>
  <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>
    </div>
  </section>
  <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>
    </div>
  </section>
</div>

 

 

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

 

 

(function($){
  $(window).load(function(){
    $("#nav-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
      highlightSelector:"#nav-menu a"
    });
    $("a[rel='next']").click(function(e){
      e.preventDefault();
      var to=$(this).parent().parent("section").next().attr("id");
      $.mPageScroll2id("scrollTo",to);
    });
  });
})(jQuery);

 

 

 

옵션

$("Selector").mPageScroll2id({
  /* scroll animation speed in milliseconds: Integer */
  scrollSpeed:1000,
  
  /* auto-adjust animation speed (according to target element position and window scroll): Boolean */
  autoScrollSpeed:true,
  
  /* scroll animation easing when page is idle: String */
  scrollEasing:"easeInOutQuint",
  
  /* scroll animation easing while page is scrolling: String */
  scrollingEasing:"easeOutQuint",
  
  /* end of page "smooth scrolling" (auto-adjust the scroll-to position when bottom elements are too short): Boolean */
  pageEndSmoothScroll:true,
  
  /*
  page layout defines scrolling direction: String
  values: "vertical", "horizontal", "auto"
  */
  layout:"vertical",
  
  /* extra space in pixels for the target element position: Integer */
  offset:0,
  
  /* highlight the main/default selectors or insert a different set: Boolean, String */
  highlightSelector:false,
  
  /* class of the clicked element: String */
  clickedClass:pluginPfx+"-clicked",
  
  /* class of the current target element: String */
  targetClass:pluginPfx+"-target",
  
  /* class of the highlighted element: String */
  highlightClass:pluginPfx+"-highlight",
  
  /* force a single highlighted element each time: Boolean */
  forceSingleHighlight:false,
  
  /* keep element highlighted until next (one element always stays highlighted): boolean */
  keepHighlightUntilNext:false,
  
  /* highlight elements according to their target and next target position (useful when targets have zero dimensions). Non "auto" layouts only: boolean */
  highlightByNextTarget:false,
  
  /* disable plugin below [x,y] screen size: boolean, integer, array ([x,y]) */
  disablePluginBelow:false,
  
  /* enable/disable click events for all selectors */
  clickEvents:true,
  
  /* append hash to URL/address bar */
  appendHash:false,
  
  /* enable/disable the default selector: Boolean */
  defaultSelector:false,
  
  /* highlight elements now and in the future */
  live:true,
  
  /* set specific live selector(s): String */
  liveSelector:false,
  
  /* user callback functions: fn */
  onStart:function(){},
  onComplete:function(){}
});