Question

我有以下代码： -

HTML

<a href="#one-camera"><div class="col-30 camera-quantity left">
<h1>1<br />Camera<br /><span style="font-size: 34px;">Residential System</span></h1>
</div></a>

<a href="#two-camera"><div class="col-30 camera-quantity left">
<h1>2<br />Camera<br /><span style="font-size: 34px;">Residential Systems</span></h1>
</div></a>

<a href="#four-camera"><div class="col-30-end camera-quantity left">
<h1>4<br />Camera<br /><span style="font-size: 34px;">Residential Systems</span></h1>
</div></a>

<div id="one-camera"></div>

<div id="two-camera"></div> <!-- THESE ARE FUTHER DOWN THE PAGE -->

<div id="four-camera"></div>

的jQuery

<script>
// Scroll to
jQuery(document).ready(function(){
    jQuery('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        jQuerytarget = jQuery(target);
        jQuery('html, body').stop().animate({
            'scrollTop': jQuerytarget.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
</script>

出于某种原因，顶部的三个按钮都滚动到＃one-camera

为什么这不符合我的预期？

你可以在这里看到它： -

http://176.67.174.179/ukcctvinstallations.co.uk/small-residential-systems/

Answer 1

这是因为所有内容都已浮动...向您的div添加clear：

#one-camera, #two-camera, #four-camera {
    clear: both;
}

jQuery - 滚动到不按预期工作

1 个答案: