jquery scroll up/down кнопки не работают

Я пытаюсь сделать прокрутку вверх и вниз на моем сайте, но я должен что-то упустить. Вот мой код ...jquery scroll up/down кнопки не работают

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! им еще узнав все это, так что я очень зеленый, любая помощь?

источник

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 scroll up/down кнопки не работают

ответ

Смежные вопросы