Как сделать в jquery плавный скролинг к якорю?

310
23 марта 2017, 20:47

Есть код, где переход по ссылке ведет к якорю ajax-представления. Код, динамически меняющегося контента, скрипта ajax работает. По якорю переходит, но быстро, нужно сделать, чтоб был плавный скроллинг. Код страницы:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script type="text/javascript" src="js/jquery.js"></script>        
</head>
<body>
    <li  class="loadBtn"  value="1"><a href="#top">1</a></li>
    <li  class="loadBtn"  value="2"><a href="#top">2</a></li>
    <li  class="loadBtn"  value="3"><a href="#top">3</a></li>
    <li  class="loadBtn"  value="4"><a href="#top">4</a></li>
    <div id="content"><a name="top" href="#"></a></div> //якорь 
<!-- Скрипт предложенный And Rey и который я ранее пробовал использовать --Ю
    <script>
    $(document).ready(function(){
    $("#menu").on("click","a", function (event) {
    //отменяем стандартную обработку нажатия по ссылке
    event.preventDefault();
    //забираем идентификатор бока с атрибута href
    var id  = $(this).attr('href'),
    //узнаем высоту от начала страницы до блока на который ссылается якорь
    top = $(id).offset().top;
    //анимируем переход на расстояние - top за 1500 мс
    $('body,html').animate({scrollTop: top}, 3500);
    });
});
</script>
<!--Скрипт для динамической смены контента -->
    <script>
        $(document).ready(function(){
            var tpls = ['1.php', '2.php','3.php','4.php',];
            $('.loadBtn').click(function(){
                loadContent($(this).index());
            });
            loadContent(0);
            function loadContent(index) {
                if (!tpls[index]) return;
                $.ajax({
                    url: tpls[index],
                    cache: false,
                    success: function(html){
                    $("#content").html(html);
                    }
                });
            }
        });
    </script>
  </body>
</html>
Answer 1

Можно вот так 

    $("ссылка").click(function(event) {
    event.preventDefault();
    var id = $(this).attr('href'),
        top = $(id).offset().top;
    $('body,html').animate({
        scrollTop: top
    }, 1000);
});
READ ALSO
Jquery: как получить все вложенные элементы, кроме тех, у кого определённый класс
jQuery

Jquery: как получить все вложенные элементы, кроме тех, у кого определённый класс

Как получить все вложенные элементы, кроме тех, у кого определённый класс?

 293
Как сохранить cookie
jQuery

Как сохранить cookie

При загрузки главной страницы mainpagecom срабатывает анимация $("header")

 267
Как масштабировать верстку
CSS

Как масштабировать верстку

Есть готовая верстка, width-1920 height-4800 responsiv верстка как в макетеЗаказчику не нравится, что на его мониторе все выглядит большим и требует уменьшить...

 218
Смещение SVG при анимации в Mozilla
CSS

Смещение SVG при анимации в Mozilla

ЗдравствуйтеПодскажите, пожалуйста, с проблемой

 204