jQuery 水平滚动站点，具有 scrollTo 行为

Question

我使用 jInvertScroll 插件创建了一个水平滚动站点。但是，我还想要一种行为，用户可以单击一个元素并且屏幕会以动画方式以水平居中的方式居中。

我已经尝试过这个解决方案：

$('body, html').animate({
        scrollLeft: $("#img").offset().top
        });

...但我无法让它水平工作。

我尝试使用 ScrollTo 插件，但插件似乎不兼容，因为它们需要不同的位置值。实际上，我现在所拥有的是，每当您按下按钮使其聚焦在元素上时，整个页面都会向右滚动大约 400 像素。

有谁知道我可以创建一个水平网站，该网站还可以在点击时动画到某些水平点？

Answer 1

我不知道单击用户实际可以看到的内容以使其居中，但这里有一个示例，您可以将动画水平滚动到元素。

也许它会帮助你。

$("button").click(function() {
  var start_position = $('.first').offset().left;
  var element_position = $('.scroll').offset().left;

  if (start_position > 0) {
    $('.demo').animate({
      scrollLeft: start_position + element_position
    }, 1000);
  } else {
    $('.demo').animate({
      scrollLeft: -1 * start_position + element_position
    }, 1000);
  }

  return false;
});

.demo {
  background: #ccc none repeat scroll 0 0;
  border: 3px solid #666;
  margin: 5px;
  padding: 5px;
  position: relative;
  width: 600px;
  overflow-x: scroll;
}

.demo img {
  float: left;
  width: 300px;
  height: 100px;
}

.wrapper {
  width: 1500px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">

  <div class="wrapper">
    <img class="first" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Westminstpalace.jpg">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/mcmurdoiceberg_pho_2017333_lrg.jpg">
    <img class="scroll" src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia21975-opt.jpg">
    <img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/36782365195_b7fcd1480c_o.jpg">
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/assasn-14li_banner_0.jpg">
  </div>

</div>

<button>
Scroll to
</button>