Как прокрутить страницу вверх или вниз на якорь, используя jQuery?

Question

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

Я бы хотел что-то, где у вас есть такая ссылка:

<a href="#nameofdivetc">link text, img etc.</a>

возможно, с добавленным классом, так что вы знаете, что хотите, чтобы эта ссылка была скользящей:

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

Затем, если щелкнуть эту ссылку, страница переместится вверх или вниз в необходимое место (это может быть div, заголовок, верх страницы и т. Д.).

---

Это то, что я имел ранее:

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

Answer 1

Описание

Вы можете сделать это, используя jQuery.offset() и jQuery.animate().

Ознакомьтесь с демонстрацией jsFiddle .

Пример

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

Дополнительная информация

• jsFiddle Демонстрация
• jQuery.offset ()
• jQuery.animate ()

Answer 2

Предполагая, что ваш атрибут href связан с div с тегом id с тем же именем (как обычно), вы можете использовать этот код:

HTML

<a href="#goto" class="sliding-link">Link to div</a>

<div id="goto">I'm the div</div>

JAVASCRIPT - (Jquery)

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});

Answer 3

Это сделало мою жизнь намного проще. Вы в основном вставляете тэг id элементов и его прокрутки без большого количества кода

http://balupton.github.io/jquery-scrollto/

В Javascript

$('#scrollto1').ScrollTo();

В вашем HTML

<div id="scroollto1">

Вот и я весь путь вниз по странице

Answer 4

function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}

Answer 5

Вы также должны учитывать, что у цели есть отступы и, таким образом, использовать position вместо offset.Вы также можете учесть потенциальную навигационную панель, которую вы не хотите перекрывать с целью.

const $navbar = $('.navbar');

$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    const scrollTop =
        $($(this).attr('href')).position().top -
        $navbar.outerHeight();

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

Answer 6

Мой подход с jQuery просто сделать так, чтобы все встроенные якорные ссылки скользили вместо мгновенного перехода

Это действительно похоже на ответ Санти Нуньес , но оно более надежное .

Поддержка

• Многофункциональная среда.
• До завершения загрузки страницы.

<a href="#myid">Go to</a>
<div id="myid"></div>

// Slow scroll with anchors
(function($){
    $(document).on('click', 'a[href^=#]', function(e){
        e.preventDefault();
        var id = $(this).attr('href');
        $('html,body').animate({scrollTop: $(id).offset().top}, 500);
    });
})(jQuery);

Answer 7

Я придерживался своего исходного кода, а также включил переход в ссылку «вверх», используя этот код, а также немного отсюда:

http://webdesignerwall.com/tutorials/animated-scroll-to-top

Хорошо работает:)

Answer 8

Вы можете добавить значение offsetTop и scrollTop на случай, если вы анимируете не всю страницу, а скорее некоторое вложенное содержимое.

Например:

var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop

this.manage_list_wrap.animate({
  scrollTop: y
}, 1000);

Answer 9

Я наткнулся на этот пример на https://css -tricks.com / snippets / jquery / smooth-scrolling / , объясняющего каждую строку кода.Я нашел это лучшим вариантом.

https://css -tricks.com / snippets / jquery / с плавной прокруткой /

Вы можете использовать нативный код:

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

или сJQuery:

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

    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) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
      }
    }
  });

Answer 10

Вот решение, которое сработало для меня.Это универсальная функция, которая работает для всех тегов a, относящихся к именованным a

$("a[href^=#]").on('click', function(event) { 
    event.preventDefault(); 
    var name = $(this).attr('href'); 
    var target = $('a[name="' + name.substring(1) + '"]'); 
    $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
});

Примечание 1. Убедитесь, что вы используете двойные кавычки " в своем html.Если вы используете одинарные кавычки, измените приведенную выше часть кода на var target = $("a[name='" + name.substring(1) + "']");

Примечание 2. В некоторых случаях, особенно если вы используете липкую полосу из начальной загрузки, именованный a будет скрываться подПанель навигации.В этих случаях (или в любом другом подобном случае) вы можете уменьшить количество пикселей от прокрутки для достижения оптимального местоположения.Например: $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow'); приведет вас к target с 15 пикселями слева вверху.