Question

每当我应用此代码时，为什么链接突然跳转到ABOUT而没有滚动效果

$("#start1").click(function(e) {
    e.preventDefault();
    var section = this.href, 
        sectionClean = section.substring(section.indexOf("#"));

    $("html, body").animate({
        scrollTop: $(sectionClean).offset().top
    }, 1000, function() {
        window.location.hash = sectionClean;
    });
});

html代码在这里

<a href="#about" id="start1" class="scroll"style="text-decoration:none;position:absolute;right:145px;top:30px;font-weight:bold;color:white;font-size:15px;display:block;" onmouseover="big(this)" onmouseout="small(this)">ABOUT US</a>

和

<div  id="about" style="position:absolute;top:1311px;width:1348px;height:657px;background-color:black;opacity:0.9;z-index:-999;display:block;">

我是否需要下载任何插件？请帮助我是新手

Answer 1

如果您想要id，请使用ID $（＆＃39;＃start1＆＃39;）

试试这个：

$('.scroll').click(function() {
    // your code.

    $("html, body").animate({
        scrollTop: $(sectionClean).offset().top
    }, 1000, 'swing', function() {
        window.location.hash = sectionClean;
    });
});

＆＃39;摇摆＆＃39;是否设置宽松。查看http://api.jquery.com/animate/了解详情。

Answer 2

好像你没有把这段代码包装在$（document）.ready（）中。如果没有看到你的所有代码，我就不知道这是不是真的情况，而是试一试。

$(document).ready(function () {
    $("#start1").click(function (e) {
        e.preventDefault();
        var section = this.href,
            sectionClean = section.substring(section.indexOf("#"));

        $("html, body").animate({
            scrollTop: $(sectionClean).offset().top
        }, 1000, function () {
            window.location.hash = sectionClean;
        });
    });
});

JSFiddle

Answer 3

这是一个迟到的答案，但您需要将false返回到单击，取消链接传播并允许滚动工作正常。

$('.element').click(function(){
    //your code

    return false;
});

如何滚动到一个没有跳跃的链接

3 个答案: