使用jquery在页面上加sidebox

使用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 = $(document).height()-$(window).height();
$(‘html,body’).animate({‘scrollTop’:h},600);} function slideChange(obj){ var value=$(obj).val();
$("html,body").animate({scrollTop:$(“#”+value+”-tr”).offset().top},600);}`