时间戳

首页 > 解决方案 > 折叠并跳转到 div 顶部

jquery - 折叠并跳转到 div 顶部

问题描述

当折叠的 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)
        }           
    };

完整的小提琴代码

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

标签： jqueryhtmlcss

解决方案

$(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）。

推荐阅读