Плавная прокрутка jQuery на одностраничном сайте

Я пытаюсь применить эффект плавной прокрутки к div с пронумерованными идентификаторами на одной странице с помощью jQuery. Созданная мною функция принимает щелкнувшие якоря и пытается анимировать тело для прокрутки к ним с помощью функции scrollTop jQuery. Есть идеи, почему это не работает?

РЕДАКТИРОВАТЬ: для рассматриваемых div задана высота: 100%, а теги привязки находятся внутри фиксированных элементов - будет ли это мешать прокрутке? (См. Редактирование внизу)

<script>
$(document).ready(function(){


//grab any anchor, when clicked, with an id that isn't blank

$('a[href*=#]:not([href=#])').click(function(){


//store the result and wrap it

    var target = $(this).attr('href');
    var targetWrapped = $(target);


//call function scrollToDiv

    scrollToDiv(targetWrapped);
    return false;
});


//create scrollToDiv function that finds the offset of the 

function scrollToDiv(element){  

    var offset = element.offset();

    $('body,html').animate({
            scrollTop: offset
    }, 500);

}

});
</script>

РЕДАКТИРОВАТЬ: HTML-код div просто:

<div class="section fit" id="1">
</div>
<div class="section fit" id="2">
</div>
<div class="section fit" id="2">
</div>

Теги привязки выглядят так:

<div class="floatbox3">
  <a href="#2">
    <span class="glyphicon glyphicon-arrow-up glyph3" aria-hidden="true" aria-label="Back"></span>
    <h2 class="direction">Back</h2>
  </a>
</div>
<div class="floatbox2">
  <a href="#4">
    <h2 class="direction">Next</h2>
    <span class="glyphicon glyphicon-arrow-down glyph3" aria-hidden="true" aria-label="Next"></span>
  </a>
</div>

А вот соответствующий CSS:

.section {
position: relative;
width: 100%;
}

.fit {
height: 100%;
}  

.floatbox2{
position:absolute;
right:50px;
bottom:400px;
height:150px;
width:150px;
}

.floatbox3{
position:absolute;
right:50px;
top:440px;
height:150px;
width:150px;
}

Положение относительное, потому что у меня есть абсолютные элементы навигации, расположенные сверху.


jquery smooth-scrolling
person geoman    schedule 12.03.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

element.offset() содержит как верхнее, так и левое смещение. Вам нужно использовать offset.top:

$(document).ready(function(){
  
  //grab any anchor, when clicked, with an id that isn't blank
  $('a[href*=#]:not([href=#])').click(function(){
    //store the result and wrap it
    var target = $(this).attr('href');
    var targetWrapped = $(target);
    //call function scrollToDiv
    scrollToDiv(targetWrapped);
    return false;
  });

  //create scrollToDiv function that finds the offset of the 
  function scrollToDiv(element){  
    var offset = element.offset();
    $('body,html').animate({
      scrollTop: offset.top
    }, 500);
  }
  
});
body { width: 600px; /* test purpose only */ }
.section { position: relative; width: 100%; }
.fit { height: 100%; }  
.floatbox2 { position:absolute; right:50px; bottom:400px; height:150px; width:150px; }
.floatbox3 { position:absolute; right:50px; top:440px; height:150px; width:150px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section fit" id="1">
    <h1>1</h1>
    <div class="floatbox2">
        <a href="#2"><h2 class="direction">Next</h2></a>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula.</p>
</div>
<div class="section fit" id="2">
    <h1>2</h1>
    <div class="floatbox3">
        <a href="#1"><h2 class="direction">Back</h2></a>
    </div>
    <div class="floatbox2">
        <a href="#3"><h2 class="direction">Next</h2></a>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula.</p>
</div>
<div class="section fit" id="3">
    <h1>3</h1>
    <div class="floatbox3">
        <a href="#2"><h2 class="direction">Back</h2></a>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula.</p>
</div>

person zessx    schedule 12.03.2015
comment
Вы правы, спасибо. Однако это все еще не работает! - person geoman; 12.03.2015
comment
Он работает для элементов внутри div, но не для перехода от div к div. - person geoman; 12.03.2015
comment
Не могу понять ваш комментарий. Будьте более точными и предоставьте нам пример HTML (отредактируйте свой вопрос), чтобы мы знали, где искать. Спасибо. - person zessx; 12.03.2015
comment
хорошо, я обновил код более подробной информацией. Целевые идентификаторы для прокрутки принадлежат к серии div, представляющих полноэкранные разделы контента - спасибо. - person geoman; 12.03.2015
comment
@geoman Я отредактировал свой пост вашим примером, чтобы показать, что он отлично работает. - person zessx; 12.03.2015
comment
Есть идеи, что может помешать ему тогда работать? У меня слишком много кода, чтобы вставить его сюда. Может ли что-нибудь внутри пронумерованных div помешать его правильной работе? - person geoman; 12.03.2015

arrow_upward
1
arrow_downward

Используйте этот

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
person anupam kumar    schedule 12.03.2015