Javascript localScroll jquery插件问题_Javascript_Jquery_Smooth Scrolling

Javascript localScroll jquery插件问题

javascript jquery

Javascript localScroll jquery插件问题,javascript,jquery,smooth-scrolling,Javascript,Jquery,Smooth Scrolling,我有一些关于localScroll jquery插件的教程，用于在页面中平滑滚动到特定的锚定标记。该示例显示，如果单击链接，页面将移动到标记。我想以不同的方式实现它。我想通过更改drop down的值在div中滚动。但它不起作用。下面给出了整个代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

我有一些关于localScroll jquery插件的教程，用于在页面中平滑滚动到特定的锚定标记。该示例显示，如果单击链接，页面将移动到标记。我想以不同的方式实现它。我想通过更改drop down的值在div中滚动。但它不起作用。下面给出了整个代码

<!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>


jqueryscrollto&localscroll演示
/*大盒子的CSS*/
.盒子{
宽度：300px；
高度：300px；
颜色：#fff；
填充：10px；
利润率：100px0；
}
#框1{
利润率：300px0；
背景：蓝色；
}
#框2{
背景：红色；
}
#框3{
背景：绿色；
}
#方框4{
背景：灰色；
}
/*CSS用于将在div中滚动的小框*/
#小盒容器{
边框：1px纯黑；
填充：20px；
宽度：300px；
高度：200px；
溢出：滚动；
}
.小盒子{
颜色：#fff；
填充：10px；
宽度：200px；
高度：200px；
利润率：0.50px0；
}
#小盒子1{
背景：蓝色；
}
#小盒子2{
背景：红色；
}
#小盒子3{
背景：绿色；
}
$（文档）.ready（函数（）
{
$（'day_select'）。更改（函数（）{
跳转=这个值；
$（跳转）.localScroll({
目标：“#小盒子容器”
});
});
});
在div中滚动
链接到小方框#1
链接到小方框#2
链接到小方框#3
小盒子#1
小盒子#2
小盒子#3

非常感谢专家的任何建议。提前感谢。

使用此语法获取客户端控件id，然后使用java脚本访问它

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

对不起，我不明白你的意思。你能说得更具体点吗？我也需要这个答案。你找到解决办法了吗？