2010-02-10 78 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) 
     } 
    }); 
}); 

悬停:

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

回答

1

平滑滚动与scrollTo插件:

 $('#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 
     }); 

这将向下滚动。所以,很简单,使向上滚动按键

 $('#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 
     }); 

小提琴例如:http://jsfiddle.net/8Nkpr/1/