내가 가지고있는 스크롤 스크립트를 어떻게 하나의 기능으로 바꿀 수 있습니까?

Question

그래서 일부 정의 된 앵커 태그 위로 마우스를 가져 가면 div의 내용을 부드럽게 스크롤 할 수있는 스크립트가 있습니다.

스크립트를 복사하고 사이트의 다른 부분에서이 기능을 사용할 때마다 선택한 요소와 함수 이름을 일부 변경해야하는 것이 아닌지 궁금합니다. 그런 다음에 값을 전달할 수있는 함수로 변환할까요?

다음은 JSFiddle에 대한 링크입니다. 그러면 JSFiddle의 기본 동작 방식에 대한 아이디어를 얻을 수 있습니다. 가능한 모든 도움에 감사드립니다!

http://jsfiddle.net/s5mgX/365/

var step = 50; 
var scrolling = false; 

// Wire up events for the 'scrollUp' link: 
$("#scrollUp").bind("click", function (event) { 
    event.preventDefault(); 
    // Animates the scrollTop property by the specified 
    // step. 
    $("#feed").animate({ 
     scrollTop: "-=" + step + "px" 
    }); 
}).bind("mouseover", function (event) { 
    scrolling = true; 
    scrollContent("up"); 
}).bind("mouseout", function (event) { 
    scrolling = false; 
}); 


$("#scrollDown").bind("click", function (event) { 
    event.preventDefault(); 
    $("#feed").animate({ 
     scrollTop: "+=" + step + "px" 
    }); 
}).bind("mouseover", function (event) { 
    scrolling = true; 
    scrollContent("down"); 
}).bind("mouseout", function (event) { 
    scrolling = false; 
}); 

function scrollContent(direction) { 
    var amount = (direction === "up" ? "-=1px" : "+=1px"); 
    $("#feed").animate({ 
     scrollTop: amount 
    }, 1, function() { 
     if (scrolling) { 
      scrollContent(direction); 
     } 
    }); 
} 


//second scroll controller // 
var step = 50; 
var scrolling = false; 

// Wire up events for the 'scrollUp' link: 
$("#twoScrollUp").bind("click", function (event) { 
    event.preventDefault(); 
    // Animates the scrollTop property by the specified 
    // step. 
    $("#feedTwo").animate({ 
     scrollTop: "-=" + step + "px" 
    }); 
}).bind("mouseover", function (event) { 
    scrolling = true; 
    twoScrollContent("up"); 
}).bind("mouseout", function (event) { 
    scrolling = false; 
}); 


$("#twoScrollDown").bind("click", function (event) { 
    event.preventDefault(); 
    $("#feedTwo").animate({ 
     scrollTop: "+=" + step + "px" 
    }); 
}).bind("mouseover", function (event) { 
    scrolling = true; 
    twoScrollContent("down"); 
}).bind("mouseout", function (event) { 
    scrolling = false; 
}); 

function twoScrollContent(direction) { 
    var amount = (direction === "up" ? "-=1px" : "+=1px"); 
    $("#feedTwo").animate({ 
     scrollTop: amount 
    }, 1, function() { 
     if (scrolling) { 
      twoScrollContent(direction); 
     } 
    }); 
} 

Answer 1

이 사용자 정의 플러그인에 대한 작업이다. 이 데모는 http://jsfiddle.net/s5mgX/367/

당신은 이런 식으로 초기화 할 수 참조 :

$('#feed').scroller({ 
    up: '#scrollUp', 
    down: '#scrollDown' 
}); 

Answer 2

쉽습니다. 함수로 감싸고 매개 변수로 원하는 ID를 포함하기 만하면됩니다. 당신이 (들) 다른 작업을 얻을 수 있다면 http://jsfiddle.net/eFxK4/1/

참조 :

나는 당신의 div의 하나와 함께 작동하도록 바이올린을했습니다.

코드

은 다음과 같습니다 :

function Scroller(scrollUp, scrollDown, feed){ 

    var step = 50; 
    var scrolling = false; 

    // Wire up events for the 'scrollUp' link: 
    $(scrollUp).bind("click", function(event) { 
     event.preventDefault(); 
     // Animates the scrollTop property by the specified 
     // step. 
     $(feed).animate({ 
      scrollTop: "-=" + step + "px" 
     }); 
    }).bind("mouseover", function(event) { 
     scrolling = true; 
     scrollContent("up"); 
    }).bind("mouseout", function(event) { 
     scrolling = false; 
    }); 


    $(scrollDown).bind("click", function(event) { 
     event.preventDefault(); 
     $(feed).animate({ 
      scrollTop: "+=" + step + "px" 
     }); 
    }).bind("mouseover", function(event) { 
     scrolling = true; 
     scrollContent("down"); 
    }).bind("mouseout", function(event) { 
     scrolling = false; 
    }); 

    function scrollContent(direction) { 
     var amount = (direction === "up" ? "-=1px" : "+=1px"); 
     $(feed).animate({ 
      scrollTop: amount 
     }, 1, function() { 
      if (scrolling) { 
       scrollContent(direction); 
      } 
     }); 
    } 

} 

Scroller("#scrollUp", "#scrollDown", "#feed");