jQuery+css实现百度百科的页面导航效果

2020-05-22 21:57:11易采站长站整理

        </div>
        <a id=”sideCatalogBtn” class=”” style=”visibility: visible;” href=”javascript:void(0);”></a>
        <a id=”sideToolbar-up” style=”visibility: visible;” title=”返回顶部” href=”javascript:void(0)”></a>
    </div>
</div>
</div>
<script type=”text/javascript” src=”../jquery-1.7.2.js”></script>
<script>
    var slideInnerHeight = $(‘#sideCatalog-catalog dl’).height();
    var slideOutHeight = $(‘#sideCatalog-catalog’).height();
    var enableTop = slideInnerHeight – slideOutHeight;
    var step = 50;
    //点击向上的按钮
    $(‘#sideCatalog-down’).bind(‘click’, function () {
        if ($(this).hasClass(‘sideCatalog-down-enable’)) {
            if ((enableTop – Math.abs(parseInt($(‘#sideCatalog-catalog dl’).css(‘top’)))) > step) {
                $(‘#sideCatalog-catalog dl’).stop().animate({‘top’: ‘-=’ + step}, ‘fast’);
                $(‘#sideCatalog-up’).removeClass(‘sideCatalog-up-disable’).addClass(‘sideCatalog-up-enable’);
            } else {
                $(‘#sideCatalog-catalog dl’).stop().animate({‘top’: -enableTop}, ‘fast’);
                $(this).removeClass(‘sideCatalog-down-enable’).addClass(‘sideCatalog-down-disable’);
            }
        } else {
            return false;
        }
    })
    //点击向下的按钮
    $(‘#sideCatalog-up’).bind(‘click’, function () {
        if ($(this).hasClass(‘sideCatalog-up-enable’)) {
            if (Math.abs(parseInt($(‘#sideCatalog-catalog dl’).css(‘top’))) > step) {