Плавная прокрутка при нажатии на ссылку привязки - PullRequest
Новая
       56

Плавная прокрутка при нажатии на ссылку привязки

420 голосов
/ 10 октября 2011

У меня есть пара гиперссылок на моей странице.Часто задаваемые вопросы, которые пользователи прочтут, посетив мой раздел справки.

Используя ссылки привязки, я могу сделать прокрутку страницы в направлении привязки и направлять туда пользователей.

Есть ли способплавная прокрутка?

Но обратите внимание, что он использует собственную библиотеку JavaScript.Может быть, jQuery предлагает что-то подобное в выпечке?

Ответы [ 25 ]

1029 голосов
/ 10 октября 2011

Обновление за апрель 2018 года: Теперь есть собственный способ сделать это : 

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

В настоящее время это поддерживается только в самых передовых браузерах.

Для поддержки старых браузеров вы можете использовать эту технику jQuery: 

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

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

А вот и скрипка: http://jsfiddle.net/9SDLw/

Если у вашего целевого элемента нет идентификатора, и вы связываетесь с ним по name, используйте это: 

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

Для повышения производительности вы должны кешировать этот селектор $('html, body'), чтобы он не запускался каждый раз при нажатии на ссылку: 

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

Если вы хотите, чтобы URL-адрес обновлялся, сделайте это в обратном вызове animate: 

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});
157 голосов
/ 21 августа 2013

Правильный синтаксис: 

//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
  $('html,body').animate({scrollTop:$(location.hash).offset().‌​top}, 500);
});

Упрощение : СУХОЙ 

function smoothScrollingTo(target){
  $('html,body').animate({scrollTop:$(target).offset().​top}, 500);
}
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    smoothScrollingTo(this.hash);
});
$(document).ready(function(){
  smoothScrollingTo(location.hash);
});

Объяснение href*=\\#:

  • * означает, что соответствует тому, что содержит # char. Таким образом, совпадают только якоря . Подробнее о значении этого см. здесь
  • \\ потому что # - это специальный символ в css-селекторе, поэтому мы должны его избежать
33 голосов
/ 30 июля 2018

Новый жар в CSS3. Это намного проще, чем любой метод, перечисленный на этой странице, и не требует JavaScript. Просто введите приведенный ниже код в css, и все внезапные ссылки, указывающие на места на вашей собственной странице, будут иметь плавную прокрутку. 

html{scroll-behavior:smooth}

После этого любые ссылки, указывающие на div, будут плавно переходить к этим разделам. 

<a href="#section">Section1</a>

Кстати, я часами пытался заставить это работать. Нашел решение в каком-то непонятном разделе комментариев. Он был глючным и не работал в некоторых тегах. Не работал в теле. Наконец-то это сработало, когда я поместил его в html {} в файле CSS.

21 голосов
/ 14 сентября 2013 
$('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

это сработало идеально для меня

15 голосов
/ 19 апреля 2018

Я удивлен, что никто не опубликовал собственное решение, которое также заботится об обновлении хеша браузера, чтобы он соответствовал.Вот оно: 

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

См. Учебник: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml

11 голосов
/ 18 февраля 2016

Я предлагаю вам сделать этот общий код: 

$('a[href^="#"]').click(function(){

var the_id = $(this).attr("href");

    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');

return false;});

Вы можете увидеть очень хорошую статью здесь: jquery-effet-smooth-scroll-defilement-fluide

6 голосов
/ 30 октября 2014 
$(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 / фрагменты / jquery / плавная прокрутка /

4 голосов
/ 10 октября 2018

Здесь уже есть много хороших ответов - однако все они упускают тот факт, что пустые якоря должны быть исключены .В противном случае эти скрипты генерируют ошибки JavaScript, как только щелкают пустой якорь.

На мой взгляд, правильный ответ выглядит так: 

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

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});
4 голосов
/ 28 октября 2013

Использование JQuery: 

$('a[href*=#]').click(function(){
  $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  return false;
});
3 голосов
/ 02 июня 2019

Только CSS 

html {
    scroll-behavior: smooth !important;
}

Все, что вам нужно добавить только это.Теперь ваше поведение прокрутки внутренних ссылок будет плавным, как поток.

для более детального понимания, прочитайте эту статью

Страница:
...