1 part1
2 part2
2-1 part2-1
2-2 part2-2
3 part3
4 part4
5 part5
6 part6
7 part7
8 part8
9 part9
10 part10
11 part11
12 part12
13 part13
14 part14
15 part15
<script><br />
var slideInnerHeight = $('#sideCatalog-catalog dl').height();<br />
var slideOutHeight = $('#sideCatalog-catalog').height();<br />
var enableTop = slideInnerHeight - slideOutHeight;<br />
var step = 50;<br />
//点击向上的按钮<br />
$('#sideCatalog-down').bind('click', function () {<br />
if ($(this).hasClass('sideCatalog-down-enable')) {<br />
if ((enableTop - Math.abs(parseInt($('#sideCatalog-catalog dl').css('top')))) > step) {<br />
$('#sideCatalog-catalog dl').stop().animate({'top': '-=' + step}, 'fast');<br />
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br />
} else {<br />
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br />
$(this).removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br />
}<br />
} else {<br />
return false;<br />
}<br />
})<br />
//点击向下的按钮<br />
$('#sideCatalog-up').bind('click', function () {<br />
if ($(this).hasClass('sideCatalog-up-enable')) {<br />
if (Math.abs(parseInt($('#sideCatalog-catalog dl').css('top'))) > step) {<br />
$('#sideCatalog-catalog dl').stop().animate({'top': '+=' + step}, 'fast');<br />
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br />
} else {<br />
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br />
$(this).removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br />
}<br />
} else {<br />
return false;<br />
}<br />
})
<p> //点击导航中的各个目录<br />
$('#sideCatalog-catalog dl').delegate('dd', 'click', function (e) {<br />
var index = $(this).index();<br />
scrollSlide($(this), index);<br />
var ddId = $(this).find('a').stop().attr('href').substring(1);<br />
var windowTop = $('a[name="' + ddId + '"]').offset().top;<br />
$('body,html').animate({scrollTop: windowTop}, 'fast');<br />
$(this).addClass('heightlight').siblings('dd').removeClass('heightlight');<br />
})
<p> //滚动页面，即滚动条滚动<br />
$(document).scroll(function () {<br />
var len = $('.headline-1').length;<br />
for (var i=len-1; i>=0; i--) {<br />
if ($(this).scrollTop() >= $('.headline-1').eq(i).offset().top - $('.headline-1').eq(i).height()) {<br />
var index = i;<br />
$('#sideCatalog-catalog dl dd').eq(index).addClass('heightlight').siblings('dd').removeClass('heightlight');<br />
scrollSlide($('#sideCatalog-catalog dl dd').eq(index), index);<br />
return false;<br />
} else {<br />
$('#sideCatalog-catalog dl dd').eq(0).addClass('heightlight').siblings('dd').removeClass('heightlight');<br />
}<br />
}<br />
})
<p> //导航的滚动，以及向上，向下按钮的显示隐藏<br />
function scrollSlide(that, index){<br />
if (index < 5) {<br />
$('#sideCatalog-catalog dl').stop().animate({'top': '0'}, 'fast');<br />
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br />
$('#sideCatalog-up').removeClass('sideCatalog-up-enable').addClass('sideCatalog-up-disable');<br />
} else if (index > 11) {<br />
$('#sideCatalog-catalog dl').stop().animate({'top': -enableTop}, 'fast');<br />
$('#sideCatalog-down').removeClass('sideCatalog-down-enable').addClass('sideCatalog-down-disable');<br />
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br />
} else {<br />
var dlTop = parseInt($('#sideCatalog-catalog dl').css('top')) + slideOutHeight / 2 - (that.offset().top - $(document).scrollTop());<br />
$('#sideCatalog-catalog dl').stop().animate({'top': dlTop}, 'fast');<br />
$('#sideCatalog-down').removeClass('sideCatalog-down-disable').addClass('sideCatalog-down-enable');<br />
$('#sideCatalog-up').removeClass('sideCatalog-up-disable').addClass('sideCatalog-up-enable');<br />
}<br />
}<br />
</script>
