localScroll jquery插件問題

我有一些關於localScroll jQuery插件的教程，用於平滑滾動頁面中的特定錨標籤。該示例顯示如果單擊鏈接，頁面將移至標記。我想以不同的方式實現它。我想通過改變下拉的值在div內滾動。但它不起作用。整個代碼如下。localScroll jquery插件問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>jQuery scrollTo & localscroll Demo</title> 
    <!-- Load jQuery --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <!-- Load ScrollTo --> 
    <script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script> 
    <!-- Load LocalScroll --> 
    <script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script> 
    <!-- Some CSS --> 
    <style type="text/css"> 
    /* CSS for the big boxes */ 
    .box { 
     width: 300px; 
     height: 300px; 
     color: #fff; 
     padding: 10px; 
     margin: 100px 0 0 0; 
    } 
    #box1 { 
     margin: 300px 0 0 0; 
     background: blue; 
    } 

    #box2 { 
     background: red; 
    } 

    #box3 { 
     background: green; 
    } 

    #box4 { 
     background: gray; 
    } 


    /* CSS for the small boxes that will scroll inside a div */ 

    #small-box-container { 
     border: 1px solid black; 
     padding: 20px; 
     width: 300px; 
     height: 200px; 

     overflow: scroll; 
    } 

    .small-box { 

     color: #fff; 
     padding: 10px; 

     width: 200px; 
     height: 200px; 
     margin: 0 0 50px 0; 
    } 

    #small-box1 { 
     background: blue; 
    } 

    #small-box2 { 
     background: red; 
    } 

    #small-box3 { 
     background: green; 
    } 

    </style> 

    <!-- javascript that will initiate jQuery and the LocalScroll plugin --> 
<script> 
    $(document).ready(function() 
    { 
     $('#day_select').change(function(){ 
      jump = this.value;       
      $(jump).localScroll({ 
      target:'#small-box-container' 
      }); 
     }); 
    }); 
</script> 

</head> 

<body> 
<h3>Scroll inside a div</h3> 

<div id="small-box-links"> 
    <select id="day_select" size="1"> 
     <option value="#small-box1">Link to small-box #1</option> 
     <option value="#small-box2">Link to small-box #2</option> 
     <option value="#small-box3">Link to small-box #3</option> 
    </select> 
</div> 

<div id="small-box-container"> 
    <div id="small-box1" class="small-box">Small-Box #1</div> 
    <div id="small-box2" class="small-box">Small-Box #2</div> 
    <div id="small-box3" class="small-box">Small-Box #3</div> 
</div> 

</body> 
</html>

來自專家的任何建議，非常感謝。提前致謝。

來源

2013-04-04 Saadi

我也需要這個答案。你有沒有找到解決方案？ – 2013-09-06 22:56:26

使用此語法獲取客戶端控制ID，然後使用java腳本訪問此語法。

$("[id*=small-box-container]")

來源

2013-04-04 12:22:32

對不起，我無法理解你的觀點。你可以說得更詳細點嗎？ – Saadi 2013-04-04 15:35:26

localScroll jquery插件問題

回答

相關問題