滾動到元素Jquery無法在Chrome或Safari上工作

我在嘗試在我正在處理的項目上實現此功能時遇到了一些問題。基本上，目標是如果用戶點擊「開始」按鈕，它將直接滾動指定的元素。唯一的問題是，它並沒有在Chrome或Safari，這是非常奇怪的，有時網站趨於隨機閃爍每當我點擊它滾動到元素Jquery無法在Chrome或Safari上工作

這裏是我工作的

digitalspin的網站工作。 PH /製作/ 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或Safari上它不會向下滾動到指定的元素。我只是看到演示中的小提琴，我很困惑爲什麼它不會在鉻上工作T_T – clestcruz

演示是在鉻和ff都工作。嘗試[這一個]（http://jsfiddle.net/gE9x8/1/） –

更改'jquery版本'爲'1.9.1'並嘗試 –

這個錯誤在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>

注：就我個人的經驗，ID可以同樣有效地應用於標籤，而不是冗餘和這仍然有效......我只在這個例子中這樣做過，因爲有些用戶注意到DOM樹上的目標ID高於這個目標的問題......我無法親自重現這個問題，所以嘿，無論哪種方式工作！

然後樣式的包裝元素和身體行爲正確

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上工作

回答

相關問題