我一直在尝试仅使用 CSS(无 jquery)从 Bootstrap 导航链接滚动到我页面上的匹配 anchor 。 @jesus-bejarano ( CSS: pure CSS scroll animation ) 的答案与匹配的 jsfiddle ( http://jsfiddle.net/YYPKM/3/ ) 似乎是一个很好的解决方案，但我似乎无法让它工作。任何帮助将不胜感激。
这是一个 bootply 的链接，其中包含我所拥有的:http://www.bootply.com/15Ib1TGYeV
感谢您的帮助。
我的 HTML:
<a id="suds"></a>
<a id="apoth"></a>
<a id="merch"></a>
<div class="container-fluid container-fullwidth" id="" style="">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- <div class="container-fluid"> -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars fa-lg"></span>
<!-- <span class="icon-bar"></span> <span class="icon-bar"></span> -->
</button> <a class="navbar-brand" href="#"><span class="fa fa-long-arrow-left"></span></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">
<li><a href="#suds" class="">Suds</a>
</li>
<li><a href="#apoth" class="">Apothecary and Men's Grooming</a>
</li>
<li><a href="#merch" class="">Gifts and Merchandise</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- </div> -->
<!-- /.container-fluid -->
</nav>
<section class="row no-gutter main">
<article class="merch-cat" id="suds">
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
</article>
<article class="merch-cat" id="apoth">
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
</article>
<article class="merch-cat" id="merch">
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#" class=""><img src="http://placehold.it/600X400" class="img-responsive"></a>
</div>
</article>
</section>
</div>
我的 CSS:
/* add a little bottom space under the images */
body {
padding-top: 0px;
}
.thumbnail {
margin-bottom:0;
}
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
.container-fullwidth {
width: 100%;
}
/* make nav always collapsed */
@media (max-width: 2000px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
/* nav opacity */
nav {
opacity: 0.5
}
/* scrolling */
a[ id= "suds" ]:target ~ #main article.merch-cat {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[ id= "apoth" ]:target ~ #main article.merch-cat {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[ id= "merch" ]:target ~ #main article.merch-cat {
-webkit-transform: translateY( -1000px );
transform: translateY( -1000px );
}
最佳答案
不知道这是否对您有帮助..但我在我的个人资料中使用它来滚动某些元素
@-webkit-keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}
@keyframes buzz-out {
10% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
20% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
30% {
-webkit-transform:translateX(3px) rotate(2deg);
-ms-transform:translateX(3px) rotate(2deg);
transform:translateX(3px) rotate(2deg);
}
40% {
-webkit-transform:translateX(-3px) rotate(-2deg);
-ms-transform:translateX(-3px) rotate(-2deg);
transform:translateX(-3px) rotate(-2deg);
}
50% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
60% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
70% {
-webkit-transform:translateX(2px) rotate(1deg);
-ms-transform:translateX(2px) rotate(1deg);
transform:translateX(2px) rotate(1deg);
}
80% {
-webkit-transform:translateX(-2px) rotate(-1deg);
-ms-transform:translateX(-2px) rotate(-1deg);
transform:translateX(-2px) rotate(-1deg);
}
90% {
-webkit-transform:translateX(1px) rotate(0);
-ms-transform:translateX(1px) rotate(0);
transform:translateX(1px) rotate(0);
}
100% {
-webkit-transform:translateX(-1px) rotate(0);
-ms-transform:translateX(-1px) rotate(0);
transform:translateX(-1px) rotate(0);
}
}
关于html - 使用纯 CSS 滚动到 anchor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26347668/