scroll - 如何滚动到打开的div

Question

HTML：

<a class="targetLink" href="#">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>

<a class="targetLink" href="#">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>

<a class="targetLink" href="#">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>

JS：

$("a.targetLink").toggle(function() {
    $(".open").slideUp(350);
    $(this).next("div").slideDown(350).addClass("open");
}, function() {
    $(this).next("div").slideUp(350).removeClass("open");
});

它是这样工作的：当你按下一个带有“targetLink”类的链接时，它会在它下面打开一个 DIV。现在我需要将 js 代码修改为：当我单击然后链接时，它会滚动到打开的 div 的开头。我怎样才能实现它？提前致谢。

Answer 1

Use scrollTop on the element that you want to scroll to the top of. http://api.jquery.com/scrollTop/

example:

$(this).next("div").scrollTop(0);

Answer 2

试试这个非常棒且简单的 jQuery 插件 - https://github.com/Ashwell/jquery-scrollThis

Answer 3

这应该可以满足您的要求：

self.scrollToDiv = function scrollToDiv(element,minus){
    element = element.replace("link", "");
    if(minus==null){
        minus=0;
    }
    $('html,body').unbind().animate({scrollTop: $(element).offset().top+minus},'slow');
};

Answer 4

我认为这是您需要的，也许更多：我的 jsfiddle。我不确定到目前为止你在做什么，但这就是我认为你想要的，不需要额外的 jquery 插件等。

这是 JS（检查 jsfiddle 的 html）：

$(".pop").hide();
$(".targetLink").on("click", function(e) {
    e.preventDefault();
    var n = $(this).next();
    if(!$(n).hasClass('open')){ 
        $(".open").removeClass('open').slideUp(200);
        $(n).addClass('open').slideDown(200); 
    } 
});


$(".nav").on("click", function(event){
    event.preventDefault(); 
    var dest=null;
    if(($($(this.hash)).offset().top) > ($(document).height()-$(window).height())){
        dest= $(document).height()-$(window).height();
    }else{
        dest=$($(this.hash)).offset().top;
    }
    $($(this.hash)).trigger("click");
    $('html,body').animate({scrollTop:dest}, 500, 'swing' );

});