早上好,
好吧我正在使用Bootstrap 3来构建我的网站 - 想要使用锚定标签上的scrollTop平滑滚动来完善它.无法让它为我的生活而工作.
所以这是我的代码:
<script type="text/javascript" src="js/animate.js"></script>
<body>
<div id='imgDiv'>
<div class="container">
<center>
<a href="#imgDiv2"><h2>my link</h2></a>
</center>
</div>
</div>
<a href="">
<div id='imgDiv2'></div>
some content here
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
这是animate.js中的脚本
// JavaScript Document
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 500);
return false;
});
});
所以它确实锚定到名为imgDiv2的div id但不使用平滑滚动动画,任何想法？
我是在了解一些知识(我已经查阅了文档,仍然无法绕过它).我已经把一些简单的CSS放在一起,以了解它应该做什么或表现什么？
<div class="navbar">
<div class="container">
<div class="logo">
Yes
</div>
</div>
</div>
所以,我已经把一些非常简单的html与一些非常简单的CSS放在一起.
body{
margin:0;
}
.container{
margin: 0 auto;
width: 960px;
background-color: red;
}
.navbar{
background-color: #E3E3E3;
border-bottom: 1px solid #A0A0A0;
color: #000;
padding: 10px 0 10px 0;
}
.navbar > logo{
float: left;
margin-left: 100px;
}
所以我想要理解或实现的是什么(如果有的话).navbar> logo做什么？我想要它做的是改变某种风格.因为我想提高我的CSS知识,所以我只是想绕过这个.
这是一个小提琴:JSFIDDLE
请注意这不是针对任何具体或项目明智的,所以我不是要求有人帮助我,我只是想要一些简单的解释如何正确使用这些.