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

我在下面的工作。但是，我相信这不是编写它的正确方法。什么是正确的方式来写在jQuery中显示或隐藏两个不同的链接滚动文本在div中？jQuery显示和隐藏链接在div内滚动

这是对以下内容完成的快速说明。

的 “包装” 的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>

来源

2013-02-27 MAZUMA

嗨。我试过你的code.its不工作。可以请你在jsfiddle中展示。 – 2013-02-28 00:55:34

http://jsfiddle.net/7r2Lz/5/它似乎没有在jsFiddle中按预期工作。它只能部分工作。它在我的开发环境中工作。我仍然只是想知道淡入淡出按钮是否正确写入。看起来很笨重。 – MAZUMA 2013-02-28 16:46:14

我想淡入 - 淡出链接是否正确，工作写得很好。但是我注意到你正在使用.offset()，你应该知道这会给你元素相对于文档的位置。所以即使只是增加一个保证金顶部或将该元素放置在其他地方，也会给您不同的价值。

而不是$('#wrap').offset().top为什么不使用$('#wrap')[0].scrollHeight向下滚动并显示最底部的文本。然而，考虑到这一点，我也想知道如果$（'＃wrap'）中的隐藏文本比您设置的360px高度长得多。您只需跳过一些文本行，然后进入底部？

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

来源

2013-10-31 00:01:15

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

回答

相关问题