0

我有一些关于 localScroll jquery 插件的教程，用于平滑滚动到页面中的特定锚标记。该示例显示，如果单击链接，页面将移动到标记。我想以不同的方式实现它。我想通过更改下拉列表的值在 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>

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

4

1 回答 1

0

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

$("[id*=small-box-container]")
于 2013-04-04T12:22:32.040 回答