1

我在下面的作品。但是，我确定这不是正确的编写方式。在 jQuery 中编写此代码以显示或隐藏两个不同的链接以滚动浏览 div 中的文本的正确方法是什么？

这是对以下内容的简要说明。

  1. “换行” div 包含溢出自身的文本。这是隐藏在 css 中的溢出。
  2. 反向链接最初是隐藏的。
  3. 用户点击越多，div 滚动到 div 底部，越多的链接淡出，反向链接淡入。
  4. 用户单击后退，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>
4

1 回答 1

0

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

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

为什么不使用简单的显示更多 - 显示更少，用户阅读文本会更容易。见样品小提琴

于 2013-10-31T00:01:15.647 回答