JQuery Прокрутите до Div

Я делаю страницу часто задаваемых вопросов и имею кнопки сверху, чтобы перейти к категории (она перескакивает на тег p, который я использую в качестве метки категории, например <p id="general"> для моей общей категории). Вместо того, чтобы просто прыгать прямо к категории, я хочу добавить эффект прокрутки. Я хочу что-то вроде http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm, которое прокручивается до нужной части моей страницы. Эта ссылка - это script, которая попадает в верхнюю часть страницы с хорошим эффектом прокрутки. Мне нужно что-то похожее, чтобы прокрутить туда, где я ссылаюсь. Например, если я хочу перейти к разному., я хочу просто иметь <a href="#misc">Miscellaneous</a> и прокручивать этот раздел страницы.

Ответ 1

$(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;
      }
    }
  });
});

Проверьте эту ссылку: http://css-tricks.com/snippets/jquery/smooth-scrolling/ для демонстрации, я использовал ее раньше, и она работает очень хорошо.

Ответ 2

Для перемещения объектов body и html требуется часто.

$('html,body').animate({
   scrollTop: $("#divToBeScrolledTo").offset().top
});

ShiftyThomas прав:

$("#divToBeScrolledTo").offset().top + 10 // +10 (pixels) reduces the margin.

Итак, чтобы увеличить использование поля:

$("#divToBeScrolledTo").offset().top - 10 // -10 (pixels) would increase the margin between the top of your window and your element.

Ответ 3

Что-то вроде этого позволит вам захватить щелчок каждой внутренней ссылки и прокрутить до положения соответствующей закладки:

$(function(){
  $('a[href^=#]').click(function(e){
    var name = $(this).attr('href').substr(1);
    var pos = $('a[name='+name+']').offset();
    $('body').animate({ scrollTop: pos.top });
    e.preventDefault();
  });
});

Ответ 4

Можно просто использовать функцию позиции JQuery для получения координат вашего div, а затем использовать прокрутку javascript:

var position = $("div").position();
scroll(0,position.top);

Ответ 5

если элемент ссылки:

<a id="misc" href="#misc">Miscellaneous</a>

а категория Разное ограничена чем-то вроде:

<p id="miscCategory" name="misc">....</p>

вы можете использовать jQuery для достижения желаемого эффекта:

<script type="text/javascript">
  $("#misc").click(function() {
    $("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top});
  });
</script>

насколько я его правильно помню.. (хотя я его не тестировал и не писал из памяти)

Ответ 6

Я столкнулся с тем же. Присмотрите пример, используя это: https://github.com/flesler/jquery.scrollTo

Я использую его следующим образом:

$('#arrow_back').click(function () {
    $.scrollTo('#features_1', 1000, { easing: 'easeInOutExpo', offset: 0, 'axis': 'y' }); 
});

Очистить раствор. Работает для меня!

Ответ 7

script ниже - это общее решение, которое работает для меня. Он основан на идеях, извлеченных из этого и других потоков.

При нажатии ссылки с атрибутом href, начинающимся с "#", он плавно переводит страницу в указанный div. Где присутствует только "#", он плавно прокручивается в начало страницы.

$('a[href^=#]').click(function(){
    event.preventDefault();
    var target = $(this).attr('href');
    if (target == '#')
      $('html, body').animate({scrollTop : 0}, 600);
    else
      $('html, body').animate({
        scrollTop: $(target).offset().top - 100
    }, 600);
});

Например, когда присутствует код выше, щелчок по ссылке с тегом <a href="#"> прокручивается вверху страницы со скоростью 600. Щелчок по ссылке с тегом <a href="#mydiv"> прокручивается до 100px выше <div id="mydiv"> в скорость 600. Не стесняйтесь менять эти цифры.

Надеюсь, это поможет!

Ответ 8

Вы также можете использовать 'name' вместо 'href' для более чистого URL:

    $('a[name^=#]').click(function(){
    var target = $(this).attr('name');
    if (target == '#')
      $('html, body').animate({scrollTop : 0}, 600);
    else
      $('html, body').animate({
        scrollTop: $(target).offset().top - 100
    }, 600);
});