Question

我已经尝试过看一下类似的问题，但他们都没有完全回答我的问题。以下代码适用于滚动$（'html，body'），但当我用$（'＃my-div'）替换它时，它不起作用。

如果你想玩一点，我准备了一个小提琴：http://jsfiddle.net/Q2Suw/ - 为了测试我的问题，多次按下“两个”或“三个”按钮（或按“两个”，然后按“三“）。

守则：

CSS

#test-me{
  width:100%; 
  height:120px; 
  position: relative; 
  overflow:auto;
  border:1px solid silver;
}

HTML

<div id="test-me">
    <h1  id="one">One</h1>
    <p>...</p>
    <h1 id="two">Two</h1>
    <p>...</p>
    <h1 id="three">Three</h1>
    <p>...</p>
</div>

<p>
    <button data-target="#one">One</button> 
    <button data-target="#two">Two</button>  
    <button data-target="#three">Three</button>
</p>

JS

$('button').on('click', function() {

    var target = $(this).attr('data-target');

    var targetPosition  = $(target).position(); 

    $('#test-me').animate({
        scrollTop : targetPosition.top
    }, 425);

});

正如我已经说过，它适用于：

$('html,body').animate({
  scrollTop : targetPosition.top
}, 425);

那么，为什么它不适用于这个职位：relative-div？非常感谢帮助！ :)如果我设法解决这个问题，我会让每个人都知道。

Answer 1

我根据我之前在SO上发现的另一个例子，为我做了一个scrollTo插件。

DEMO

$.fn.scrollTo = function(elem, speed) {
if (!$(elem).offset()) {
    alert("Scroll-Target not defined");
    return false;
} else if (!$(this).offset()) {
    alert("Scroll-Element not defined");
    return false;       
}
scrollto = $(this).scrollTop() - $(this).offset().top + $(elem).offset().top;
$(this).animate({
    scrollTop:  scrollto
}, speed == undefined ? 500 : speed); 
return this;
};

使用此功能，您将不需要数据属性。

$('button').on('click', function() {

var idx = $(this).index();
var targetObj = $($("#test-me h1").get(idx));

$("#test-me").scrollTo(targetObj, 425);

});

jQuery：滚动到<div> </div>中的位置时，目标位置“更改”

1 个答案: