jquery - jquery窗口滚动功能到一个id然后做一些事情

Question

我只是想知道在使用窗口滚动功能到某个 id 而不是以像素为单位的高度时是否可以触发警报。我问的原因是我意识到高度会根据显示的位置而有所不同，因此引用 id 可能更有效。

Answer 1

使用.position() .offset()您可以获得元素的位置。将它与您的滚动功能结合起来，您将拥有一个“到 id 的窗口滚动功能”。

// store the position of the element in position
var position = $('#idOfElement').offset(); //=position() but always relative to 
                                           //document instead of parent. 
                                           //thanks to sidonaldson

// on scrolling of the document do something
$(document).scroll(function () {
    //the current height
    var y = $(this).scrollTop();

    //If the current Y is bigger than the element. (you scrolled beyond the element)
    if(y >= position.top){
        //do something
    }else{
        //do something else 
    }
});

Answer 2

使用 jQuery，您可以将页面动画化为 id。

$("html, body").animate({ scrollTop: $('#your-id').offset().top }, 1000, function(){
    alert("Scroll end");
});

首先，您必须使用 'html,body' 使其跨浏览器。

然后你通过计算它相对于页面顶部的偏移量来计算 id 元素的位置（而不是相对于父元素的位置）

然后你以毫秒为单位设置你的速度。

最后你传入一个函数引用，或者，在这种情况下，定义一个回调函数——在这里你可以添加你的警报。

请注意，这必须在 document.ready 被触发之后。

Answer 3

尝试这个：

//getting the Y position of the element you want to scroll to
var position = $('#element').offset().top;

//scrolling to the element with an animation of 700 miliseconds
$('body').animate({
    scrollTop: position
}, 700, function(){  //callback function (executed when animation finishes)
    alert("Hello there!");
});

现场演示：http: //jsfiddle.net/wdFCm/2/