2010-02-10 2 views
0

jQuery scrollTo를 사용하여 오버플로 된 div 내의 내용을 스크롤하고 있습니다. 링크를 클릭하면 div가 내용을 세로로 스크롤합니다. 그러나 링크를 클릭하는 대신 링크 위로 마우스를 가져 가면이 효과가 발생합니다.? jquery api

jQuery의 scrollTo 옵션이 맞지 않다고 생각합니다. 그러나 hover 이벤트에 대한 jQuery API 메소드가 있습니다.

이 질문은 단순히 질문처럼 보일 수 있지만 클릭하는 대신 마우스를 가져 가면 "scrollTo"의 수직 스크롤 기능을 유지할 수있는 방법이 있습니까?

수직 스크롤 :

jQuery(function ($) { 
    $.localScroll.defaults.axis = 'y'; 
    $.localScroll({ 
     target: '#content', 
     // could be a selector or a jQuery object too. 
     queue: true, 
     duration: 500, 
     hash: false, 
     onBefore: function (e, anchor, $target) { 
      // The 'this' is the settings object, can be modified 
     }, 
     onAfter: function (anchor, settings) { 
      // The 'this' contains the scrolled element (#content) 
     } 
    }); 
}); 

유혹 : scrollTo 플러그인을

$("#page-wrap li.button").hover(function(){ /* vertically slide here? */ });V 

답변

1

부드러운 스크롤 :

 $('#page-wrap li.button-down').hover(function(){ 
      var scrollDistance = $('body').scrollTop(); 
      var scrollHeight = $('#content').height(); 
      var windowHeight = $('body').height(); 
      var scrollSpeed = (scrollHeight - scrollDistance - windowHeight) * 2.5; // higher than 2.5 is slower, lower is faster 
      $('body').scrollTo('100%', scrollSpeed); 
     },function(){ 
      $('body').stop().scrollTo('+=20px', 100); 
      // stop on unhover 
     }); 

이 아래로 스크롤합니다. http://jsfiddle.net/8Nkpr/1/

: 그것은 위로 스크롤 버튼을

 $('#page-wrap li.button-up').hover(function(){ 
      var scrollDistance = $('body').scrollTop(); 
      var scrollSpeed = scrollDistance * 2.5; // higher than 2.5 is slower, lower is faster 
      $('body').scrollTo('0px', scrollSpeed); 
     },function(){ 
      $('body').stop().scrollTo('-=20px', 100); 
      // stop on unhover 
     }); 

바이올린 예를 만들기 위해 간단