0

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

$(document).ready(function(){
$("#menu").on("click","a", function (event) {
  event.preventDefault();

  var id = $(this).attr('href'),
      top = $(id).offset().top;

  $('body,html').animate({scrollTop: top}, 1500);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="main">
<section id="tab1">
    <video class="videocontent" controls poster="images/preview.jpg">
        <source src="images/ps.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    </video>
</section>
<section id="tab2">
    <img src="images/background.jpg">
</section>
</div>
<div class="leftcol">
    <img class="img1" src="images/ps4.jpg">
    <img class="img2" src="images/logo.jpg">
    <div class="tabs" id="menu">
        <ul class="nav">
            <li class="nav_item">
                <a href="#tab1">Video</a>
            </li>
            <li class="nav_item">
                <a href="#tab2">Horizon Zero Dawn</a></br>
            </li>
            <li class="nav_item">
              <a href="#tab3">Through Aloy's Eyes</a>
            </li>
          </ul>
    </div>
</div>

4
  • jsfiddle.net/vmtye285 плавный переход по вашему коду работает... Или в чем проблема? Ctrl+F5 пробовали?
    – Oleksandr
    6 апр 2017 в 8:42
  • jsfiddle.net/vmtye285/3 посмотрите мой полный код , у меня почему то не работает @Oleksandr
    – Calvin
    6 апр 2017 в 8:48
  • У вас вылазит ошибка, что нет элемента с id tab3. Ну и скрол по идее может работать, только если есть куда скролить, те контент больше высоты окна и появился скроллбар
    – Crantisz
    6 апр 2017 в 10:13
  • @Crantisz а как написать эту jquery функцию на чистом javascriptе?
    – Calvin
    6 апр 2017 в 10:16

1 ответ 1

0

У вас три ошибки.

1.У вас вылазит ошибка, что нет элемента с id tab3. Хотя это скорее просто недоделка

2.Cкрол по идее может работать, только если есть куда скролить, те контент больше высоты окна и появился скроллбар. я добавил высоты:

.main section{
  min-height:600px;
} 

3.Если вам надо скролить не саму страницу а контент в какой-то ее части, нужно вызывать animate() scroll-top от этой части, а не от body:

 $('.main').animate({scrollTop: top}, 1500);

https://jsfiddle.net/vmtye285/4/

4
  • а как написать это все на чистом javascript без использования jquery ?
    – Calvin
    6 апр 2017 в 10:23
  • Если у Вас возник новый вопрос, задайте его при помощи кнопки «Задать вопрос». Если нужно указать контекст, дайте ссылку на этот вопрос.
    – Crantisz
    6 апр 2017 в 10:24
  • Вот и отлично, не надо мешать эти два вопроса
    – Crantisz
    6 апр 2017 в 10:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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