使用jquery在页面上加sidebox
标签(空格分隔): 前端 html jquery javascript
当我们页面上的元素特别多,需要快速查找定位的时候,不妨加一个sidebox,就比如b站的右侧导航栏这样用户会非常快速的定位到自己想看的栏目。具体加法:
<div class="side">
<ul>
<li style="border:none;"><a href="javascript:goTop();" class="sidetop"><img src="${path}/images/layout/to-top.png"></a></li>
<li><div class="sidebox">
<select id="side_equipment" class="sidebox" onchange="slideChange(this);">
<c:forEach var="list" items="${itemlist}">
<option value="${list.name}">${list.name}</option>
</c:forEach>
</select>
</div>x
</li>
<li style="border:none;"><a href="javascript:goButtom();" class="sidetop"><img src="${path}/images/layout/to_buttom.png"></a></li>
</ul>
</div>
js代码:
`function goTop(){
$('html,body').animate({'scrollTop':0},600);
}
function goButtom(){
var h =
(‘html,body’).animate({‘scrollTop’:h},600);}
function slideChange(obj){
var value=(obj).val();
("html,body").animate({scrollTop:(“#”+value+”-tr”).offset().top},600);}`