Плавная прокрутка (якорь на jquery)

Рубрика: jQuery

Якорь это метка, до которой мы осуществляем переход, с какой либо ссылки в которой указан этот якорь #go1 это будет означать что перейти нам нужно до тега на странице у которого указан id=go1 или name=go1

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

$(document).ready(function() {
$("a.scrollto").click(function () {
var elementClick = $(this).attr("href")
var destination = $(elementClick).offset().top;
jQuery("html:not(:animated),body:not(:animated)").animate({scrollTop: destination}, 800);
return false;
});
});

Пример:

Можно конечно и так сделать для всех якорей на сайте, плавный переход

$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});

И еще так


$(document).ready(function() {
$('a[href^="#"]').click(function(){
var el = $(this).attr('href');
$('body').animate({
scrollTop: $(el).offset().top}, 2000);
return false;
});
});

and

P.S.: Все эти примеры работают с обычным способом перехода по якорям, так что при отключенном скрипте, будет все переходить как надо, как обычно скачком, просто без анимации

Видео:


Поделись с друзьями:

комментариев 9

комментариев 9 для записи Плавная прокрутка (якорь на jquery)

  1. undor:

    Суупер, давно хотел что то подобное у себя на сайте не знал, как называется )))

  2. ZX:

    У Вас есть одна недоработка. Скрипт цепляет только по ID якорей. А в классике (и все редакторы так работают) якорь вешается на NAME

    Чуток дописал на этот случай.

    [code]
    $(‘a[href*=#]’).bind(«click», function(e){
    var anchor = $(this);
    var name = anchor.attr(‘href’).replace(new RegExp(«#»,’gi’), »);
    $(‘html, body’).stop().animate({
    scrollTop: $(‘a[name=’+name+’]’).offset().top
    }, 1000);
    e.preventDefault();
    return false;
    });
    [/code]

    • bortvlad:

      Спасибо ZX согласен по замечанию, но я от атрибута name отказываюсь как и W3C, поддержки данного атрибута в HTML5 нет, его заменяет ID.

  3. Вадим:

    Подскажите пожалуйста
    я в джава скрипт ничего не понимаю
    какой из этих трех кодов лучше
    какой хуже
    и почему
    Спасибо!

    • bortvlad:

      Вадим, если вы знаете хорошо html и css то понимать код jQuery не составит труда.
      1. Якорь работает при указанном классе «scrollto» на ссылке.
      2. Тоже по классу но уже «ancLinks», задана скорость там разная, в принципе ничем не отличаются друг от друга, они все кроссбраузерные.
      3. Ничего прописывать дополнительно не надо, если в ссылке прописан якорь то скрипт подцепляется и делают плавным ваш переход по якорю на странице, более универсален, не подходит для тех случаев когда у вас якоря могут выполнять не стандартную функцию слайды, переход по страницам без перезагрузки и тп.

  4. Dribentsov:

    Есть не плохое видео. Может поможет.
    Как создать Jquery якорь «Плавная прокрутка страницы».
    _https://www.youtube.com/watch?v=Zi947g6YglY

  5. Dimas:

    У меня вообще не работает ни один вариант с якорями. Везде пишет: Cannot read property ‘top’ of undefined
    Ну и в целом не понятно, почему он должен покрутиться до якоря, даже если бы «топ» был дефайнд. Мы же берем офсет().топ у элемента на который кликнули, а он находится в самом верху!
    В случае с правкой которую внес господин ZX все становится логично, но главное начинает работать.
    Если возможно, объясните, пожалуйста

  6. Kito:

    Круто!Спасибо)