Question

以下是javascript代码，用于向下滚动部分：

    <script type="text/javascript">
       $(function() {
$('.nav').click(function() {
    var id = $(this).attr('id');
    $('html, body').animate({
        scrollTop: ($('#' + id + '.section').offset().top)
    }, 1000);
});
       })();
</script>

我在此页面中有3个部分，每个部分都有不同的背景颜色：

    <div class="section" id="1" style="background-color:#0F0">
<section>

</section>
</div>
<div class="section" id="2" style="background-color:#0FF">
<section>

</section>
</div>
<div class="section" id="3" style="background-color:#CF6">
<section>

</section>
</div>

效果很好，但它有一个bug。有时当我使用javascript代码滚动时，它会在500毫秒内显示第1部分，然后转到另一部分。

以下是jsfiddle

如果我不需要它而不显示第1部分，我怎么能解决这个问题。

firefox比chrome或IE更好。我的意思是有时它发生在firefox上，但总是发生在其他浏览器上。

这就像bug我该如何解决？

任何帮助将不胜感激。

提前致谢

Answer 1

在HTML链接中，只需将href替换为相关div的哈希标记即可。

$(function() {
$('.nav').click(function() {
    var id = $(this).attr('id');
    $('html, body').animate({
        scrollTop: ($('#' + id + '.section').offset().top)
    }, 1000);
});
       })();

nav {
    position: fixed;
    width: 100%;
    background-color: lightgrey;
    text-align: center;
    margin-bottom: 20px;
	font-size:18px;
	font-family:"B Koodak";
}

a {
    margin: 0 10px 0 10px;
    text-decoration: none;
    color: black;
}

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.section {
    height: 100%;
    padding-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <a class="nav" id="1" href="#1">A</a>
    <a class="nav" id="2" href="#2">B</a>
    <a class="nav" id="3" href="#3">C</a>
</nav>
<div class="section" id="1" style="background-color:#0F0">
<section>
<p>hi</p>
</section>
</div>
<div class="section" id="2" style="background-color:#0FF">
<section>
<p>how are you</p>
</section>
</div>
<div class="section" id="3" style="background-color:#CF6">
<section>
<p>welcome</p>
</section>
</div>

在javascript中向下滚动部分的错误

1 个答案: