水平滚动定位

Horizontal Scroll Positioning

本文关键字：定位 滚动 水平      更新时间：2023-09-26

我希望我的滚动条自动定位到我的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： 头顶菜单具有位置：固定，溢出-x：自动和溢出-y：隐藏。 Divdivitems 指定了 750px 宽度 溢出-y：隐藏和位置：相对

我试过使用 

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

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

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

下面是一个 JSFiddle：

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

相关文章：