Question

我有一个模态，我用于字母搜索。在顶部，有一个带A-Z按钮的水平条。我希望每个按钮都能将div（带溢出：自动）滚动到相应的字母。

例如，如果用户点击＆＃34; G＆＃34;，它会将div向下滚动到G结果。

我想用js或jquery设置这些onclicks。这就是我到目前为止所拥有的：

$('.search__strip__letter').each(function () {
    var number = $(this).data('letter');
    $(this).click(function () {
        var target = '#search__results__letter--'+number;
        $('.search-results').animate({scrollTop:$(target).position().top}, 200);
    })
})

为什么这不起作用......？

编辑： Here's a fiddle。

Answer 1

在浮动元素上添加了clearfix类，更新了jquery选择器拼写修复了这里。 $('.search__strip__letter').each(function () { var number = $(this).data('letter'); $(this).click(function () { console.log('click'); var target = '#search__results__letter--' + number; console.log(target,$('.search-results')); $('.search-results').animate({ scrollTop: $(target).offset().top + 100 }, 200); }) })

http://jsfiddle.net/Aerious/z17nyh2s/8/

Answer 2

<强>更新

您应该使用$(target).offset().top，它的工作方式与position属性无关。

您必须scrollTop至0并减去.search-results偏移量的顶部。

更新II

如果你想为双方制作动画，而不是滚动到顶级0，你必须得到当前的scrollTop并总结它，看看如下：

＆＃13;

[].forEach.call('ABCDEFGHIJKLMNOPQRSTUVWXYZ', function(l, i) {
  var a = document.createElement('a');
  a.textContent = l;
  a.addEventListener('click', function(e) {
    var target = '#search__results__letter--' + i;
    var now = $('.search-results').scrollTop();
    $('.search-results').animate({ scrollTop: $(target).offset().top - $('.search-results').offset().top + now }, 200);
  });
  document.getElementById('letters').appendChild(a);
  
  var div = document.createElement('div');
  div.id = 'search__results__letter--' + i;
  div.textContent = 'Letter ' + l;
  
  document.querySelector('.search-results').appendChild(div);
});

＆＃13;

#letters a {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: darkblue;
  margin: 2px;
  line-height: 25px;
  text-align: center;
  color: white;
  font-family: Verdana;
  cursor: pointer;
}

.search-results {
  height: 120px;
  overflow-y: auto;
}

.search-results div {
  height: 100px;
  background-color: aqua;
  margin: 2px;
  font-family: Verdana;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="letters">
</div>
<div class="search-results">
</div>

＆＃13;

Answer 3

您需要对代码进行一些修改才能使其按照我的理解运行。首先，您需要为.search-results元素提供一些上下文。您可以通过向该元素添加position:relative来执行此操作。既然它是search__results__letter--*元素的相对父级，您可以使用动画片段滚动到它们。但是，您还需要计算相对于父级的偏移滚动的滚动位置。简单数学将首先获取search__results__letter--*元素的滚动位置并将其添加到scrollTop()的{{1}}来处理该部分。您可以在下面的演示代码中看到此方法：

.search-results

$('.search__strip__letter').each(function () {
    var number = $(this).data('letter');
    $(this).on('click', function () {
        var target = '#search__results__letter--'+number;
        var currentPosition = $('.search-results').scrollTop();
        $('.search-results').animate({scrollTop:currentPosition + $(target).position().top}, 200);
    })
})

.search-results {
    border: 1px solid;
    height: 100px;
    overflow: auto;
    position: relative;
}

编辑：

我使用我的代码改编了原始海报的小提琴。我必须做的一件事就是通过在该类上创建一个新的block formatting context来强制<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a href="#" class="search__strip__letter" data-letter="A">A</a></li> <li><a href="#" class="search__strip__letter" data-letter="B">B</a></li> <li><a href="#" class="search__strip__letter" data-letter="C">C</a></li> <li><a href="#" class="search__strip__letter" data-letter="D">D</a></li> <li><a href="#" class="search__strip__letter" data-letter="E">E</a></li> <li><a href="#" class="search__strip__letter" data-letter="F">F</a></li> </ul> <div class="search-results"> Search Results A Search Results B Search Results C Search Results D Search Results E Search Results F </div>回流。我这样做是通过添加.search__results__letter添加display:inline-block;width:100%;或overflow:hidden;也应该完成同样的事情。另外，请参阅MDN docs on block formatting context了解强制它的其他方法。

https://jsfiddle.net/gLpvzgu5/

Answer 4

我建议您使用jquery.scrollTo插件。它具有高度可定制性，支持动画并且非常易于使用。您只需要使用以下内容替换animate代码：

$('.search-results').scrollTo($(target), 200);

内部滚动不工作？

4 个答案:

编辑：