jQuery Выделите Div

Question

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

Answer 1

* часто требуется для перемещения объектов 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.

Answer 2

$(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 / для демонстрации, я использовал ее раньше, и она прекрасно работает.

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

Answer 4

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

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

Answer 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>

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

Answer 6

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

При нажатии на ссылку с атрибутом 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. Не стесняйтесь менять эти цифры.

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

Answer 7

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

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

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

Чистый раствор.У меня работает!

Answer 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);
});