Question

我正在制作一个带导航栏的网站。这个导航栏包含5个彼此相邻的和平。它有一个jQuery滚动激活位置更改，效果很好。

$(window).scroll(function(e){ 
            $el = $('.navBar'); 
            if ($(this).scrollTop() > $(window).height()*0.36 && $el.css('position') != 'fixed'){ 
                $('.navBar').css({'position': 'fixed', 'padding-top': '0px'}); 
            }
            if ($(this).scrollTop() < $(window).height()*0.36 && $el.css('position') == 'fixed')
            {
                $('.navBar').css({'position': 'absolute', 'padding-top': $(window).height()*0.38}); 
            } 
        });

以下是我正在谈论的HTML代码：

<body>
    <div class="box1">
        <div class="navBar">
            <div class="test">test</div>
            <div class="test2">test2</div>
            <img src="images/Logo/Flat8.png" class="test3">
            <div class="test4">test</div>
            <div class="test4">test</div>
            <div class="navBarBorder"></div>
        </div>
        <img src="images/Cyan.png" class="box1Background">
    </div>
    <div class="box2">

        <img src="images/Salmon.png" class="box2Background">
    </div>
    <div class="box3">

        <img src="images/Sand.png" class="box3Background">
    </div>
    <div class="box4">

        <img src="images/Light-Blue.png" class="box4Background">
    </div>
    <div class="box5">

        <img src="images/Black-Blue.png" class="box5Background">
    </div>
</body>

（每个方框都有它的背景图片。）

我想要这个导航栏做什么：当你点击类=＆＃34; test1 / 2/3/4/5＆＃34;时，我更喜欢使用jQuery进行平滑滚动。 div的。我已经做了一些研究，但没有任何对我有用。 jQuery滚动激活的位置更改是否与它有关，或者我使用错误的代码来表达我的想法？

Answer 1

您需要更改导航以使用链接而不是div，并使用目标div中的ID而不是类。例如：

    <div class="navBar">
        <a href="#box1">test</a>
        <a href="#box2">test2</a>
        <img src="images/Logo/Flat8.png" class="test3">
        <a href="#box3">test</a>
        <a href="#box4">test</a>
        <div class="navBarBorder"></div>
    </div>

有了这个，并且您的目标div具有匹配的ID，您可以使用以下脚本平滑滚动到每个div。

 jQuery('.navBar a').click(function(e) {
    var location = jQuery(this).attr('href');

    jQuery('html, body').animate({
        scrollTop: jQuery(location).offset().top
    }, 1200);

    return false;
});

Div链接/滚动到其他div

1 个答案: