div滚动条从底部开始向上滚动
效果如下:
HTML：
<ul class="friendList">
<li><a href="#">中国政府⽹</a></li>
<li><b>国务院部门⽹站</b>
<div>
<!--很长的隐藏⼆级链接-->
<a href="#">友情连接⽹站</a>
html滚动效果代码
<a href="#">友情连接⽹站</a>
<a href="#">友情连接⽹站</a>
<a href="#">友情连接⽹站</a>
<a href="#">友情连接⽹站</a>
<!--隐藏⼆级链接-->
</div>
</li>
<li><b>省政府⽹站</b>
<div>
<a href="#">友情连接⽹站</a>
<a href="#">友情连接⽹站</a>
</div>
</li>
</ul>
CSS：
.friendList{display:flex;justify-content:space-between;}
.friendList li{padding-right:20px;position:relative;font-size:16px;color:#115db2;cursor:pointer;}
.friendList li b{font-weight:normal;}
.
friendList a{color:#115db2;}
.friendList li:after{content:"";display:block;position:absolute;right:0;top:45%;border:5px solid transparent;border-top-color:#115db2;}
.friendList li div{position:absolute;left:-20px;bottom:18px;padding:10px 20px 20px 20px;display:none;background:#daecfb;z-index:999;height:300px;overflow-y:au .friendList li div a{display:block;white-space:nowrap;padding-bottom:10px;}
JS：
//友情连接下拉
$(".friendList li").hover(function(){
$(this).find("div").slideDown(10);
//滚动条从底部开始
$(this).find("div").scrollTop($(this).find("div").prop('scrollHeight'));  },function(){
$(this).find("div").slideUp(200)
})
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。