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內滾動

回答

相關問題