0

Есть код, где переход по ссылке ведет к якорю 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>
1

1 ответ 1

1

Можно вот так

    $("ссылка").click(function(event) {
    event.preventDefault();
    var id = $(this).attr('href'),
        top = $(id).offset().top;
    $('body,html').animate({
        scrollTop: top
    }, 1000);
});
2
  • ничего не поменялось....сразу переходит к якорю Commented 22 мар. 2017 в 14:39
  • 1
    jsfiddle.net/neqdesz2 Вот рабочий пример, у вас была ошибка, в том что ссылка висела на атрибут "name", а не на id. Плюс в скрипте надо задать класс/id ссылки по которой кликаете
    – And Rey
    Commented 23 мар. 2017 в 2:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.