2016-05-20 11 views
-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下にスクロールする必要があり、それが動作していない: ここではコードです。

+1

コンソールを開いて調査しましたか?かなり重大なエラーが発生しています。 –

+0

それは私のために働いています:https://jsfiddle.net/gerardofurtado/ur5h5t3u/ –

+0

@ジェラルドFurtadoどのようにあなたのために働いていますか? – JohnDotHR

答えて

0

文書の<head>に必ずjQueryを含めてください。あなたが提供したフィドルは、それがHTMLウィンドウに含まれていました。外部リソースセクションに移動すると、すべてが機能します。

関連する問題