Jquery 单击菜单上的滑动Div

我想创建一个过渡，同时按下任何导航按钮向下移动div

下面是我尝试过的代码笔链接。 我对CSS3一无所知，我需要你的帮助才能在div向下或向上滑动时获得过渡效果，我还想在页面向下滑动时修复导航栏

请帮忙做这些事情。我只是在学习如何做这些事情。我正在尝试在本地系统中使用引导程序，但我无法做到这一点。如果你们中有人知道怎么做，请告诉我

HTML:

您可以使用Jquery的scrollTop属性，如下所示：

$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

试试这个：

 $('a').click(function() {
    var clickedele = $(this).attr("href");
    var desti = $(clickedele).offset().top;
   $('html, body').animate({ scrollTop: desti-15}, 'slow');
    return false;
});

注意：首先，您必须在页面上包含jQuery:script。

这应该可以：

HTML:

---

JSFiddle:

您需要学习JavaScript。一旦你知道JavaScript，你就可以搜索平滑滚动并在你的页面中实现它。我知道我们可以在js中实现它，但是CSS3呢？我们可以在CSS3中做同样的事情吗？@user3027865我很确定你想做的事情不仅仅是CSS3可以做到的。

$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

 $('a').click(function() {
    var clickedele = $(this).attr("href");
    var desti = $(clickedele).offset().top;
   $('html, body').animate({ scrollTop: desti-15}, 'slow');
    return false;
});

<nav>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#staff">Our Staff</a>
</nav>
<ul id="tabs">
    <li id="about">About</li>
    <li id="services">Services</li>
    <li id="staff">Our Staff</li>
</ul>

#tabs, #tabs li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#tabs li {
    width: 250px;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .5s linear;
    transition: height .5s linear;
}

#tabs li:target {
    height: 250px;
}