2015-11-30 2 views
2

Я получил этот бит кода из другого вопроса о переполнении стека, но, похоже, это небольшая проблема. Хеш изменяется правильно, когда я перехожу из раздела в раздел, но когда я пытаюсь выполнить прокрутку, он перескакивает на самый верх, вместо гладкой ручной прокрутки. Любая помощь будет оценена :)Страница вскакивает вместо прокрутки вверх

HTML

<!doctype html> 
<html> 

<head> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<header> 
</header> 
<body> 
    <div class="main"> 
     <section id="one" class="section"></section> 
     <section id="two" class="section"></section> 
     <section id="three" class="section"></section> 
     <section id="four" class="section"></section> 
     <section id="five" class="section"></section> 
     <section id="six" class="section"></section> 
    </div> 
</body> 
</html> 

А вот JS:

$(document).scroll(function(){ 
    $('section').each(function(){ 
     if (
      $(this).offset().top < window.pageYOffset 
    //begins before top 
     && $(this).offset().top + $(this).height() > window.pageYOffset 
    //but ends in visible area 
    //+ 10 allows you to change hash before it hits the top border 
     ) { 
      window.location.hash = $(this).attr('id'); 
     } 
    }); 
}); 
+0

поэтому вместо того, чтобы прыгать вверх вы хотите, чтобы прокручивать, как если бы вы были использовать полосу прокрутки? –

+0

Возможный дубликат [jQuery прокрутки до элемента] (http://stackoverflow.com/questions/6677035/jquery-scroll-to-element) – Alex

+0

Да, это странно вскакивает, и я не могу вернуться к предыдущему разделу, если только Я снова прокручиваю –

ответ

1

вместо pageYOffset вы можете сделать $(window).scrollTop(), которая будет возвращать верхнюю часть страницы расстояния смещения от в верхней части документа в окне. Если вы хотите оживить прокрутку к свойству, вам нужно прокрутить до положения элемента с идентификатором. Если вы хотите анимировать прокрутку к началу страницы вы можете сделать

$(window).animate({ 
    top: 0 
}, 1000); 
0

вы можете решить эту проблему, добавив прокрутки вверх анимацию в JavaScript, таким образом, мы добавим задержку прокрутки, которая дает идеальный эффект прокрутки вверх.

Javascript

window.onload = function() { 
// short timeout 
setTimeout(function() { 
    $(document.body).scrollTop(0); 
    }, 15); 
}; 
Смежные вопросы