折叠并跳转到 div 顶部

Question

当展开折叠的 div 以显示其余内容时，它会将页面上的其余内容向下推。这可以。 单击“少读”时，内容会向上移动，将用户留在页面中的未知位置。 我想在父 div 折叠时跳转到它的顶部。

尝试实现我在另一篇 SO 文章中找到的一些代码但失败了：

$('#A_ID').click(function (e) { //#A_ID is an example. Use the id of your Anchor
    $('html, body').animate({
        scrollTop: $('#DIV_ID').offset().top - 20 //#DIV_ID is an example. Use the id of your destination on the page
    }, 'slow');
});

JS

$(document).ready(function(){
    $('.text').each(function(element,index){
        if($(this)[0].scrollHeight>$(this).height()){
            $(this).next().show()
        }else{
            $(this).next().hide()
        }
    })
})

function changeheight(obj) {
        var fullHeight = $(obj).parent().prev().get(0).scrollHeight        
        var readmore = $(obj);
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
            $(obj).parent().prev().data('oldHeight',$(obj).parent().prev().height())
            $(obj).parent().prev().animate({'height':fullHeight},500)
        } else {
            readmore.text("Read more");
           $(obj).parent().prev().animate({'height':$(obj).parent().prev().data('oldHeight')},500)
        }           
    };

Full Fiddle code

在小提琴上，如果您点击红色区域的“阅读更多”，然后向下滚动以点击“阅读更少”，您将留在页面底部，而不是红色 div 的顶部。

Answer 1

$(obj).parent().prev().animate({'height':$(obj).parent().prev().data('oldHeight')},500)

这个语句只改变了div的高度，所以你的页面会保持不变scollY，这会导致页面看起来向下滚动。

所以你需要做的是手动滚动页面。

只需将您的changeheight 函数更改为：（在else 中添加语句）

function changeheight(obj) {
        var fullHeight = $(obj).parent().prev().get(0).scrollHeight   
        var readmore = $(obj);
        if (readmore.text() == 'Read more') {
            readmore.text("Read less");
            $(obj).parent().prev().data('oldHeight',$(obj).parent().prev().height())
            $(obj).parent().prev().animate({'height':fullHeight},350)
        } else {
           readmore.text("Read more");
           $(obj).parent().prev().animate({'height':$(obj).parent().prev().data('oldHeight')}, 350); 
           $("html, body").animate({ scrollTop: $(obj).parent().prev().offset().top }, 350);
        }           
    };

$("html, body").animate({ scrollTop: $(obj).parent().prev().offset().top }, 350);

此语句将帮助您将顶部滚动到相应的 div。

顺便说一句，不建议使用相同的id（在您的代码中为text）。