Прокрутите до элемента JQuery, не работающего на Chrome или Safari

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

Вот сайт, я работаю над

digitalspin. тел/создать/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>

источник

2014-02-18 clestcruz

Вы пытались войти, что внутри $ ("# company_info"). Первый(). Смещение ().Вверх? –

Прошу прощения, я все еще новичок в javascript и jquery. Что означает вы, войдя в $ ("# company_info"). First(). Offset(). Top? – clestcruz

$ ("# gs_button"). Click (function() {console.log ('top', $ ("# company_info"). First(). Offset(). Top);}); –

При нажатия на heading gs_button затем anchor tag в heading также получить clicked, так что ваш animate function не работает пытаться связать событие нажмите на 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; 
    }); 
});

Надеется, что это работает.

Demo Заезд Firefox и Chrome.

источник

2014-02-18 10:14:54

Привет, я просто попробовал решение. Он работает на mozilla, но на хроме или сафари он не будет прокручиваться до указанного элемента. Я только что видел демо в скрипке, и я очень смущен, почему это не работает на chrome T_T – clestcruz

Демо работает в хром и ff обоих. Попробуйте [этот] (http://jsfiddle.net/gE9x8/1/) –

Измените 'jquery version' на' 1.9.1' и попробуйте –

Ошибка в способности вебкита оживить тело. Вместо этого создайте 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); 
});

источник

2014-02-26 16:50:27 BenLeah

Прокрутите до элемента JQuery, не работающего на Chrome или Safari

ответ

Смежные вопросы