Question

我的作品如下。但是，我确信这不是写它的正确方法。在jQuery中编写它以显示或隐藏两个不同的链接以在div中滚动文本的正确方法是什么？

这是对以下内容的快速解释。

“wrap”div包含溢出的文本。这隐藏在css中隐藏溢出。
最初隐藏了反向链接。
用户点击更多并且div滚动到div的底部，链接越淡，后面的链接就会淡入。
用户点击回来，div中的文字向上滚动，后面的链接淡出，更多的链接重新淡入。

的jQuery

$(document).ready(function() {

    $('#scroll-up').click(function(){
        $('#div').animate({scrollTop: $('#div').offset().top}, 1500);
        $("#scroll-up").fadeOut("fast");
        $("#scroll-down").fadeIn("fast");
    });

     $('#scroll-down').click(function(){
        $('#div').animate({scrollTop:0}, 1500);
        $("#scroll-down").fadeOut("fast");
        $("#scroll-up").fadeIn("fast");
    });

});

CSS

#outer-wrap { margin-top: -50px; padding: 24px 12px 12px 24px; width: 330px; height: 450px; background: rgba(255, 255, 255, 0.5); }
#outer-wrap a { display: block; }
#outer-wrap a#scroll-down { display: none; }
#wrap { margin: 12px 0; width: 330px; height: 360px; overflow: hidden; }

HTML

<div id="outer-wrap">
     <a href="javascript:void(0)" id="scroll-down">Back</a>
     <div id="wrap" class="column first">
         <p>Long paragraph of text.</p>
     </div>
     <a href="javascript:void(0)" id="scroll-up">More</a>
 </div>

Answer 1

我认为fadeIn - fadeOut链接写得正确且运行良好。但是我注意到你正在使用.offset()，你应该知道这会给你相对于文档的元素位置。因此，即使只添加一个边距顶部或将元素放在其他位置也会给你一个不同的价值。

而不是$('#wrap').offset().top为什么不使用$('#wrap')[0].scrollHeight向下滚动并显示最底层的文字。但是考虑到这一点，我也想知道如果$（'＃wrap'）中的隐藏文本远远超过你设置的360px高度。你会跳过那里的一些文字行，然后继续到底部？

为什么不选择简单的Show More - Show Less，用户阅读文本会更容易。参见样本fiddle

jQuery显示并隐藏在div内滚动的链接

1 个答案: