Question

我希望我的滚动条自动定位到我div中的单击按钮。代码

HTML：

<div class="headmenu">
  <div class="divdivitems">
    <a class="ui button" id="cat1" onclick="myCat(this.id);">
      <img src="../css/images/fishiii.png" class="heightwidth padding5">
    </a>
    <a class="ui circular image border1px margin33 foodicon heightwidth bordergray bgwhite" id="cat2">
      <img src="../css/images/porki.png" class="heightwidth padding5">
    </a>
    <a class="ui circular image border1px margin33 foodicon heightwidth bordergray bgwhite" id="cat3">
      <img src="../css/images/beefi.png" class="heightwidth padding5">
    </a>
    <a class="ui circular image border1px margin33 foodicon heightwidth bordergray bgwhite" id="cat4">
      <img src="../css/images/chicken.png" class="heightwidth padding5">
    </a>
    <a class="ui button" id="cat5">
      <img src="../css/images/saladi.png" class="heightwidth padding5">
    </a>
    <a class="ui circular image border1px margin33 foodicon heightwidth bordergray bgwhite" id="cat6">
      <img src="../css/images/pasta.png" class="heightwidth padding5">
    </a>
  </div>
</div>

CSS： Headmenu的位置：fixed，overflow-x：auto和overflow-y：hidden。 Divdivitems指定了宽度为750px的overflow-y：hidden和position：relative

我尝试使用

$('#cat5').click(function() {
          event.preventDefault();
          $('#headmenu').animate({
            marginLeft: "-=200px"
          }, "fast");
       });

但它不起作用。我希望我的滚动条水平放置在我单击的按钮类别上。谢谢

Answer 1

而不是margin-left使用.scrollLeft(400);和.scrollTop(400);。

这是一个JSFiddle：

http://jsfiddle.net/Delorian/9k0wyzod/

水平滚动定位

1 个答案: