點擊滾動到div不起作用

-1

所以我有這個簡單的圖像和div設置。在點擊div時，網站應該向下滾動到另一個div。一切似乎都沒問題，但由於某種原因，它不起作用。我已將jsfiddle附加到代碼的底部。下面的代碼：點擊滾動到div不起作用

<div class="block-2"> 
     <h4>Choose your coffee!</h4> 
    <div class="row row-centered"> 
     <div class="col-xs-12 col-md-4 col-centered" > 
      <div class="scrollcezve"> 
       <img src="img/cezve-2.png" class="hvr-grow img-round"> 
      </div> 
     </div> 
     <div class="col-xs-12 col-md-4 col-centered" > 
      <img src="img/coffee-pot-heart.png" class="hvr-grow img-round" > 
     </div> 
     <div class="col-xs-12 col-md-4 col-centered"> 
      <img src="img/espresso-cappuccino-machine.png" class="hvr-grow img-round" > 
     </div> 
    </div> 
</div> 

<div id="cezve"> 
    <div class="row row-centered"> 
     <div class="col-xs-6 col-lg-6" > 
      <img src="img/cezve.png"> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-lg-6" > 
      <h4>Cezve</h4> 
      <p>A cezve is a pot designed specifically to make Turkish coffee. The body and handle are traditionally made of brass or copper, occasionally also silver or gold. Though, recently, cezveler are also made from stainless steel, aluminium, or ceramics. The long handle is particularly useful to avoid burning one's hands, and the brim is designed to serve the coffee. <br> 
      The name cezve is of Turkish origin, where it is a borrowing from Arabic: جذوة‎ "ember". 
      Other regional variations of the word cezve are jezve and čezve. In Ukrainian and Russian, the word is spelled джезва (where it exists alongside турка, IPA: [ˈturkə]). In Bosnia and Herzegovina, Serbia, Croatia, Slovenia and Czech Republic it is a long-necked coffee pot, spelled "džezva".</p> 
     </div> 

</div> 

.block-2 { 
    height: auto; 
    background-color: #795548; 
    text-align: center; 
} 

.block-2 img { 
    height: 250px; 
    width: 250px; 
    padding: 20px; 

} 

.block-2 h4 { 
    color: #fff; 
    font-family: 'Lily Script One', cursive; 
    font-size: 30px; 
    margin: 0; 
    padding: 10px 10px; 
    text-align: center; 
} 

#cezve { 
    height: auto; 
    background-color: #C59989; 
} 

#cezve img { 
    padding: 20px 20px; 
    height: 400px; 
    width: 550px; 
} 

#cezve p { 
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 400; 
    line-height: 20px; 
    padding: 10px 50px 0px 0px; 
} 

#cezve h4 { 
    color: #fff; 
    font-family: 'Lily Script One', cursive; 
    font-size: 50px; 
    margin: 0; 
    padding-top: 20px; 
} 

$(".scrollcezve").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#cezve").offset().top 
    }, 2000); 
}); 

https://jsfiddle.net/qpr0vd4y/1/

通過點擊DIV scrollcezve（或圖像cezve-2png）應該向下滾動到#cezve，但它不工作。

來源

2016-05-20 JohnDotHR

您是否打開控制檯進行調查？有一個非常重要的錯誤發生。 –

它爲我工作：https://jsfiddle.net/gerardofurtado/ur5h5t3u/ –

@Gerardo Furtado它是如何工作的？ – JohnDotHR

確保您在文檔的<head>中包含jQuery。您提供的小提琴包含在HTML窗口中。如果將其移動到外部資源部分，則一切正常。

來源

2016-05-20 15:47:26 johnniebenson

點擊滾動到div不起作用

回答

相關問題