jquery向上/向下滚动按钮不起作用

我想让我的网站上的滚动向上和向下按钮，但我必须缺少的东西。这里是我的代码...jquery向上/向下滚动按钮不起作用

HTML：

<body> 
    <div id="middle-body">test</div> 
    <div id="toTop">^</div> 
    <div id="toBottom">^</div> 
</body>

JS/jQuery的：

var scrolled=0; 
$(document).ready(function(){ 
    $("#toTop").on("click" ,function(){ 
     scrolled=scrolled+300; 
     $("#middle-body").animate({ 
       scrollTop: scrolled 
     }); 
    }); 
    $("#toBottom").on("click" ,function(){ 
     scrolled=scrolled-300; 
     $("#middle-body").animate({ 
       scrollTop: scrolled 
     }); 
    }); 
});

CSS：

#middle-body { 
    color: white; 
    background: #555; 
    height: 900px; 
} 

#toTop { 
    cursor: pointer; 
    display: block; 
    font-size: 100px; 
    line-height: 100px; 
    font-weight: bold; 
    position: fixed; 
    top: 40%; 
    right: 10px; 
    text-align: center; 
} 

#toBottom { 
    cursor: pointer; 
    display: block; 
    font-size: 100px; 
    font-weight: bold; 
    line-height: 100px; 
    position: fixed; 
    bottom: 20%; 
    right: 10px; 
    text-align: center; 
    transform: rotate(-180deg); 
    -webkit-transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg); 
} 

#toTop:hover, #toBottom:hover { 
    color: white; 
}

和最后但并非最fiddle! IM仍然至少学习所有这些都非常绿色，有帮助吗？

来源

2014-10-16 TEN Design

middle-body没有任何滚动，这不是限制。您可能试图滚动文档的正文。
scrollTop是元素内容的顶部距离它的视口顶部的像素数。所以，当你想走的页面，您可以添加到它，而不是减：

var scrolled=0; 
 
$(document).ready(function(){ 
 
    $("#toTop").on("click" ,function(){ 
 
     scrolled=scrolled-300; 
 
     $("html, body").animate({ 
 
      scrollTop: scrolled 
 
     }); 
 
    }); 
 
    $("#toBottom").on("click" ,function(){ 
 
     scrolled=scrolled+300; 
 
     $("html, body").animate({ 
 
      scrollTop: scrolled 
 
     }); 
 
    }); 
 
});

#middle-body { 
 
    color: white; 
 
    background: #555; 
 
    height: 900px; 
 
} 
 

 
#toTop { 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 100px; 
 
    line-height: 100px; 
 
    font-weight: bold; 
 
    position: fixed; 
 
    top: 40%; 
 
    right: 10px; 
 
    text-align: center; 
 
} 
 

 
#toBottom { 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 100px; 
 
    font-weight: bold; 
 
    line-height: 100px; 
 
    position: fixed; 
 
    bottom: 20%; 
 
    right: 10px; 
 
    text-align: center; 
 
    transform: rotate(-180deg); 
 
    -webkit-transform: rotate(-180deg); 
 
    -moz-transform: rotate(-180deg); 
 
    -ms-transform: rotate(-180deg); 
 
    -o-transform: rotate(-180deg); 
 
} 
 

 
#toTop:hover, #toBottom:hover { 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="middle-body">test</div> 
 
    <div id="toTop">^</div> 
 
    <div id="toBottom">^</div> 
 
</body>

JSFiddle

来源

2014-10-16 19:29:31 George

我会去这样的事情：

$(document).ready(function(){ 
    $("#toTop").on("click" ,function(){ 
     $("html, body").animate({ 
      scrollTop: -300 
     }, 600); 
    }); 
    $("#toBottom").on("click" ,function(){ 
     $("html, body").animate({ 
      scrollTop: 300 
     }, 600); 
    }); 
});

这里是一个updated JSFiddle

来源

2014-10-16 19:28:00 Tim

你的元素不是一个溢出元素，而html, body是。 http://jsfiddle.net/Lpetwnre/10/

$("#toTop, #toBottom").on("click" ,function(){ 
    var sc = this.id==="toTop" ? "-=200" : "+=200" ; 
    $("html, body").stop().animate({scrollTop: sc }); 
});

来源

2014-10-16 19:30:47

我认为，除了关于动画scrollTop为html,body其他的答案，应该提到的是，你应该有递增和递减的scrolled值截止区域。你不希望它超出你的html元素的高度（document.documentElement.clientHeight）。你也不希望它低于0。

来源

2014-10-16 19:45:02

jquery向上/向下滚动按钮不起作用

回答

相关问题