Ошибка прокрутки вверх/вниз

Question

Я хочу добавить свиток в верхнюю/нижнюю кнопку в своем блоге. Поэтому я нашел это.

http://jsfiddle.net/AvHah/

HTML

<div class='button_up' id='button_up' style='display:none;'/> 
<div class='button_down' id='button_down' style='display:none;'/> 

CSS

body {background:pink; height:2000px;} 
/* Up and Down Buttons with jQuery 
----------------------------------------------- */ 
.button_down{ 
    padding:7px; /* Distance between the border and the icon */ 
    background-color:white; 
    border:1px solid #CCC; /* Border Color */ 
    position:fixed; 
    background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left; 
    background-position:50% 50%; 
    width:20px; /* Button's width */ 
    height:20px; /* Button's height */ 
    bottom:242px; /* Distance from the bottom */ 
    right:5px; /* Change right to left if you want the buttons on the left */ 
    white-space:nowrap; 
    cursor: pointer; 
    border-radius: 3px 3px 3px 3px; 
    opacity:0.7; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
} 

.button_up{ 
    padding:7px; /* Distance between the border and the icon */ 
    background-color:white; 
    border:1px solid #CCC; /* Border Color */ 
    position:fixed; 
    background: white url(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left; 
    background-position:50% 50%; 
    width:20px; /* Button's width */ 
    height:20px; /* Button's height */ 
    bottom:280px; /* Distance from the bottom */ 
    right:5px; /* Change right to left if you want the buttons on the left */ 
    white-space:nowrap; 
    cursor: pointer; 
    border-radius: 3px 3px 3px 3px; 
    opacity:0.7; 
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
} 

JAVASCRIPT

(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})(); 

$(function() { 
    var $elem = $('body'); 
    $('#button_up').fadeIn('slow'); 
    $('#button_down').fadeIn('slow'); 
    $(window).bind('scrollstart', function(){ 
    $('#button_up,#button_down').stop().animate({'opacity':'0.2'}); 
}); 
$(window).bind('scrollstop', function(){ 
    $('#button_up,#button_down').stop().animate({'opacity':'1'}); 
}); 
$('#button_down').click(
function (e) { 
    $('html, body').animate({scrollTop: $elem.height()}, 800); 
}); 
$('#button_up').click(
function (e) { 
    $('html, body').animate({scrollTop: '0px'}, 800); 
});}); 

Это именно то, что я искал. Но есть проблема. Когда вы нажимаете на нижнюю кнопку, она работает нормально, берет меня в нижней части страницы. Но когда он достигает дна, он автоматически переводит меня в начало страницы. В чем проблема? Может кто-то исправить код. Или что-нибудь подобное этому было бы высоко оценено.

Answer 1

Вы делаете ошибку при закрытии тегов DIV. Попробуйте этот HTML Markup:

<div class='button_up' id='button_up' style='display:none;' ></div> 
<div class='button_down' id='button_down' style='display:none;' ></div> 

В самом деле, ваш первый DIV (до) не рассматривалась как закрытые, так что ваш второй ДИВ был «внутри» кнопки, так что два события были захвачены вниз и вверх.

Fiddle