jQuery прокрутка до Div

Question

jQuery прокрутка до Div

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

512 8

jQuery html

8 ответов:

Comments

Ничего не найдено.

FarligOpptreden · Accepted Answer · 2014-08-15 13:41:42

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

Brian · Accepted Answer · 2017-03-23 17:48:27

Это часто требуется, чтобы двигаться как тело, так и 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.

Guffa · Accepted Answer · 2012-02-02 04:01:49

что-то вроде этого позволит вам взять на себя щелчок каждой внутренней ссылки и прокрутите до позиции соответствующей закладки:
$(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();
  });
});

JimmyJammed · Accepted Answer · 2011-11-15 23:23:39

можно просто использовать функцию jQuery position для получения координат вашего div, а затем использовать JavaScript scroll:
var position = $("div").position();
scroll(0,position.top);

Stoic · Accepted Answer · 2011-03-12 21:30:31

если элемент link:
<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>
насколько я правильно помню.. (хотя, я не проверял его и написал его по памяти)

lflier · Accepted Answer · 2015-02-24 20:06:28

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

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

Я надеюсь, что это помогает!

Paul0515 · Accepted Answer · 2015-12-28 04:44:51

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

Я использую его следующим образом:
$('#arrow_back').click(function () {
    $.scrollTo('#features_1', 1000, { easing: 'easeInOutExpo', offset: 0, 'axis': 'y' }); 
});
очистить решение. Работает на меня!

nickRO87 · Accepted Answer · 2016-01-19 11:18:12

вы также можете использовать " имя "вместо" 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);
});