Question

通过单击菜单链接

创建滚动到元素的特定位置

Html代码

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Brand</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#1" class="scroll">1</a>
                </li>
                <li><a href="#2" class="scroll">2</a>
                </li>
                <li><a href="#3" class="scroll">3</a>
                </li>
                <li><a href="#4" class="scroll">4</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<!-- header -->
<div class="row sections">
    <div class="container"> <a name="1"></a>

        <div class="col-lg-12">
                <h1>Div 1</h1>

        </div>
    </div>
</div>
<div class="row sections">
    <div class="container">
        <div class="col-lg-12"> <a name="2"></a>

                <h1>Div 2</h1>

        </div>
    </div>
</div>
<div class="row sections">
    <div class="container">
        <div class="col-lg-12"> <a name="3"></a>

                <h1>Div 3</h1>

        </div>
    </div>
</div>
<div class="row sections">
    <div class="container">
        <div class="col-lg-12"> <a name="4"></a>

                <h1>Div 4</h1>

        </div>
    </div>
</div>

以上代码的Jquery

$(function () {
    $("a.scroll").click(function () {
        if (this.hash) {
            //get rid of hash
            var hash = this.hash.substr(1);

            //get the position of the <a name> 
            var $toElement = $("a[name=" + hash + "]");
            var toPosition = $toElement.position().top;

            //scroll/animate that element
            $("body,html").animate({

                scrollTop: toPosition

            }, 500, "easeOutExpo");

            //don't do the jump
            return false;
        }
    });

    if (location.hash) {
        var hash = location.hash;
        window.scroll(0, 0);
        $("a[href=" + hash + "]").click();
    }
});

使用bootstrap我已经修复了我的导航栏并有4个链接在4个特定位置滚动并尝试使用哈希方法将页面滚动到特定元素但是我滚动不正常并且当我尝试滚动时，缓动也无法正常工作通过单击不滚动的元素，甚至不显示任何错误。

如果我在动画位置方法之后使用分号进行工作滚动但不是以动画方式，

所以如何修复它以便我可以滚动到页面的特定位置。

Answer 1

我认为你需要取消点击哈希链接的默认属性。

尝试以下js

$(function () {
    $("a.scroll").click(function (e) {
        if (this.hash) {
            //get rid of hash
            var hash = this.hash.substr(1);

            //get the position of the <a name> 
            var $toElement = $("a[name=" + hash + "]");
            var toPosition = $toElement.position().top;

            //scroll/animate that element
            $("body,html").animate({

                scrollTop: toPosition

            }, 500, "easeOutExpo");

            //don't do the jump
            return false;
        }
    });

    if (location.hash) {
        var hash = location.hash;
        window.scroll(0, 0);
        $("a[href=" + hash + "]").click();
    }
    e.preventDefault();
});

Answer 2

使用$toElement.offset().top获取目标位置。

Live Demo

$("a.scroll").click(function (e) {
    e.preventDefault();
    if (this.hash) {
        //get rid of hash
        var hash = this.hash.substr(1);

        //get the position of the <a name> 
        var $toElement = $("a[name=" + hash + "]");
        var toPosition = $toElement.offset().top;

        //scroll/animate that element
        $("body").animate({

            scrollTop: toPosition

        }, 500);

    }
});

Answer 3

你几乎拥有它。 element.position()仅为您提供相对于父的偏移。

将其记录到控制台，然后为所有div提供-13px。

改为使用element.offset()：

var toPosition = $toElement.offset().top;

链接到工作JSFiddle：http://jsfiddle.net/jpreynat/Lbr0s80m/1/

jquery滚动代码无法正常工作

3 个答案: