Перейдите к элементу Jquery, который не работает в Chrome или Safari.

0

У меня возникают некоторые проблемы с попыткой реализовать эту функцию в проекте, над которым я работаю. В основном цель заключается в том, что пользователь нажимает кнопку "Начать", она будет непосредственно прокручивать указанный элемент. Единственная проблема заключается в том, что он не работает на хром или сафари, что очень странно, и иногда веб-сайт имеет тенденцию мерцать случайным образом, когда я нажимаю на него

Вот веб-сайт, над которым я работаю

digitalspin.ph/create/index.html

HTML

<section class="get_started">
<div class="container_12">
    <div class="grid_12 relative">
        <h2 id="gs_button"><a href="#company_info"><span>Get<br/> Started</span></a></h2>
    </div>
</div>
</section>


<div class="content">
<div id="company_info" class="container_12">
    <h2 class="creative_spin_small">Creative Spin</h2>
    <div class="liquid-slider"  id="main-slider">
        <div class="slide1">
        <h2 class="title">Who We Are</h2>
        <div class="custom_column">
            <div class="message">
                <h3>turning</h3>
                <h4>your</h4>
                <h5>imagination</h5>
                <h6>into <span>reality</span></h6>
            </div>
        </div>
        <div class="custom_column">
        grid 6
        </div>
        </div>

        <div>
        <h2 class="title">What We Can Do</h2>
        <p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
        </div>      

    </div>
</div>
<div class="social">
    <ul>
        <li><a href="#" target="_blank" alt="Facebook">Facebook</a></li>
        <li id="social_twitter"><a href="#" target="_blank" alt="Twitter">Twitter</a></li>
    </ul>
</div>
</div>

JAVASCRIPT

<script>
$(document).ready(function(){
    $("#gs_button").click(function() {
    $('html, body').animate({
    scrollTop: ($("#company_info").first().offset().top)
    }, 1200);
    });
})
</script>
  • 0
    Вы пробовали регистрировать, что находится внутри $ ("# company_info"). First (). Offset (). Top?
  • 0
    Извините, я все еще новичок в javascript и jquery. Что означает вас, войдя в $ ("# company_info"). First (). Offset (). Top?
Показать ещё 1 комментарий
Теги:
google-chrome
safari

2 ответа

0

Ошибка заключается в способности webkit анимировать тело. Вместо этого создайте div только внутри тела и примените анимацию к этому вместо этого...

<body>
    <div class="wrapper">
        <nav>
            <a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
            <a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
        </nav>
        <section>
            <a id="section1">&nbsp;</a>
            <p>Some content<p>
        </section>
        <section>
            <a id="section2">&nbsp;</a>
            <p>Some more content<p>
        </section>
    </div>
</body>

Примечание. В моем личном опыте идентификатор можно так же эффективно применить к тегу, а не к избыточному, и это все еще работает... Я сделал это только в этом примере, потому что некоторые пользователи отметили проблемы с идентификаторами таргетинга выше DOM дерева, чем это... Я не мог лично воссоздать эту проблему, так что, эй, в любом случае работает!

Затем создайте элемент обертки и тело, чтобы правильно вести себя

body { position:relative; }

.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }

Затем jQuery

$('.scroll-to-id').on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');
    $('.wrapper').animate({
        scrollTop: $(target).offset().top
    }, 1500);
});
0

Когда вы нажимаете на heading gs_button тогда anchor tag в heading также получает clicked, поэтому ваша animate function не работает. Попробуйте связать событие click на anchor вместо heading например,

$(document).ready(function(){
    $("#gs_button a").click(function(e) {// bind anchor here
       $('html, body').animate({
          scrollTop: ($("#company_info").offset().top)
       }, 1200);
       e.preventDefault();// to prevent default working of anchor;
    });
});

Надеюсь, это сработает.

Демоверсия в Firefox и Chrome.

  • 0
    Привет, я только что попробовал решение. Он работает в Mozilla, но в Chrome или Safari не будет прокручиваться до указанного элемента. Я только что видел демо в скрипке, и я очень смущен, почему он не будет работать на Chrome T_T
  • 0
    Демо работает в Chrome и FF оба. Попробуйте это
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню