Question

我希望创建一个转换，同时在点击任何导航按钮时向下移动div。

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

请帮助解决这些问题。我只是在学习如何做这些事情。我试图在我的本地系统中使用bootstrap，但我无法做到这一点。如果你们中的任何人知道怎么做，请告诉我。

HTML：

<div id="tab_container">
    <nav id="tabs">
        <ul id="nav">
            <li class="active"><a href="#about">About</a>
            </li>
            <li class="inactive"><a href="#Services">Services</a>
            </li>
            <li class="inactive"><a href="#OurStaff">Our Staff</a>
            </li>
            <li class="inactive"><a href="#book">book</a>
            </li>
            <li class="inactive"><a href="#Gift">Gift Cards</a>
            </li>
            <li class="inactive"><a href="#Reviews">Reviews</a>
            </li>
        </ul>
    </nav>
</div>
<div id='container'>
    <div id='services' class="box">Services</div>
    <div id='about' class="box">About</div>
    <div id='OurStaff' class="box">Our Staff</div>
    <div id='book' class="box">book</div>
    <div id='Gift' class="box">Gift</div>
</div>

CSS：

.box{
  width : 100%;
  height : 200px;
  background : blue;
  color:red;
  font-size:25px;
  margin-bottom : 20px; 
  padding : 20px;
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;    
-webkit-border-radius: 29px 20px 20px 20px;
-moz-border-radius: 29px 20px 20px 20px;
  border-radius: 29px 20px 20px 20px;
}

http://codepen.io/anon/pen/wrxEn

Answer 1

您可以使用Jquery .animate() 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;
});

Working Example

注意：首先，您必须在网页上添加jQuery：<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>脚本。

Answer 2

这应该有效：

HTML：

<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>

CSS：

#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;
}

JSFiddle：http://jsfiddle.net/rCH8X/

单击菜单上的滑动Div

2 个答案: