Question

我想在我的博客上添加滚动到顶部/底部按钮。所以我找到了这个。

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标记：

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

事实上，你的第一个DIV（up）并不算是封闭的，所以你的第二个div是“内部”向上按钮，所以两个事件被捕获下来。

Fiddle

滚动到顶部/底部按钮错误

1 个答案: