Question

所以我有了这个简单的图像和div设置。点击div后，网站应向下滚动到另一个div。一切似乎都没问题，但由于某种原因，它不起作用。我在代码的底部附加了一个jsfiddle。这是代码：

<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，但它不起作用。

Answer 1

确保您在文档的<head>中包含jQuery。您提供的小提琴将其包含在HTML窗口中。如果将其移动到外部资源部分，一切正常。

点击滚动到div不起作用

1 个答案: