2
由於某種原因，我似乎無法讓我的錨標記鏈接到頁面中較低的div id。下面是一個link到破損的網站，試着點擊它是如何工作的，並最小化你的窗口以允許滾動發生，它不會向下滾動頁面，我不知道爲什麼。我正在嘗試用javascript（特別是jQuery和流星模板事件）解決這個問題。我認爲流星正在阻止這種工作方式的經典方式，但我仍然陷入困境。試圖鏈接一個錨標記到流星js的div id
我使用流星，所以我認爲這可能是我的問題，我現在嘗試不同的解決方案，但它不工作
JS
Template.postsList.events({
'click #worksClick':function(e,tmpl) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#works").offset().top
}, 600);
}
});
HTML
<template name="postsList">
<div class="container">
<div class="logo">
<h1>iClinic</h1>
</div>
<nav class="topNav">
<ul>
<li><a id="worksClick" href="#works">How it works</a></li>
<li><a href="#">Applications</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Reach Us</a></li>
</ul>
</nav>
<div class="mastHead">
<header>
<h2>iClinic helps the medical professional bring superior health-care to all people</h2>
</header>
</div><!--mastHead ends-->
<div class="detailsWrapper">
<section class="details">
<h3>The more you know the better you can treat.</h3>
</section>
</div>
<div id="works" class="worksWrapper">
<section class="works">
<h3>How it Works</h3>
<p>iClinic runs on any web browser or Windows computer, you simply create a account and begin to intergrate your existing and new patient data into iClinic</p>
</section>
</div>
<div id="workas" class="worksWrapper">
<section class="works">
<h3>How it Works</h3>
<p>iClinic runs on any web browser or Windows computer, you simply create a account and begin to intergrate your existing and new patient data into iClinic</p>
</section>
</div>
</div><!--container ends-->
</template>
STYLUS（它符合css，這沒有錯誤地寫ñCSS）
*
margin 0
padding 0
.container
width 100%
.adminNav
display none
html
font-size 90%
font-family 'Source Sans Pro', sans-serif
.logo
float left
background #7d7d7d
width 15%
padding 3rem 0 3rem 0
//padding-top 3.5rem
h1
font-size 4rem
font-weight 100
letter-spacing: 0.2rem
text-align center
color #fff
.topNav
float left
width 85%
padding 4.7rem 0 3.8rem 0
background #d3d3d3
ul
li
display inline
font-size 2rem
font-weight 100
a
margin-left 3rem
text-decoration none
color #fff
.mastHead
background #989797 url("http://www.proteus.com/assets/helius_professional_header2.jpg")
background-size cover
background-position 0 -5rem
background-repeat no-repeat
background-attachment fixed
-webkit-filter: grayscale(100%);s
width 100%
clear left
header
width 66%
margin auto
padding-top 5rem
padding-bottom 5rem
h2
font-size 4rem
font-weight 500
letter-spacing 0.2rem
text-align center
color #fff
text-shadow 2px 2px 2px #000
@media(min-width:1400px)
header
width 50%
padding-top 20rem
padding-bottom 20rem
.detailsWrapper
width 100%
background #989797
float left
.details
width 66%
margin auto
text-align center
padding 5rem 0 5rem 0
h3
font-size 3rem
font-weight 100
color #fff
letter-spacing 0.3rem
.worksWrapper
width 100%
float left
background rgba(155, 154, 154, 0.18)
.works
width 66%
margin auto
text-align center
padding 5rem 0 5rem 0
h3
font-size 3rem
font-weight 100
color #fff
letter-spacing 0.3rem
編譯CSS
* {
margin: 0;
padding: 0
}
.container {
width: 100%
}
.adminNav {
display: none
}
html {
font-size: 90%;
font-family: 'Source Sans Pro', sans-serif
}
.logo {
float: left;
background: #7d7d7d;
width: 15%;
padding: 3rem 0 3rem 0
}
.logo h1 {
font-size: 4rem;
font-weight: 100;
letter-spacing: 0.2rem;
text-align: center;
color: #fff
}
.topNav {
float: left;
width: 85%;
padding: 4.7rem 0 3.8rem 0;
background: #d3d3d3
}
.topNav ul li {
display: inline;
font-size: 2rem;
font-weight: 100
}
.topNav ul li a {
margin-left: 3rem;
text-decoration: none;
color: #fff
}
.mastHead {
background: #989797 url("http://www.proteus.com/assets/helius_professional_header2.jpg");
background-size: cover;
background-position: 0 -5rem;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-filter: grayscale(100%);
width: 100%;
clear: left
}
header {
width: 66%;
margin: auto;
padding-top: 5rem;
padding-bottom: 5rem
}
header h2 {
font-size: 4rem;
font-weight: 500;
letter-spacing: 0.2rem;
text-align: center;
color: #fff;
text-shadow: 2px 2px 2px #000
}
@media (min-width: 1400px) {
header {
width:50%;
padding-top: 20rem;
padding-bottom: 20rem
}
}
.detailsWrapper {
width: 100%;
background: #989797;
float: left
}
.details {
width: 66%;
margin: auto;
text-align: center;
padding: 5rem 0 5rem 0
}
.details h3 {
font-size: 3rem;
font-weight: 100;
color: #fff;
letter-spacing: 0.3rem
}
.worksWrapper {
width: 100%;
float: left;
background: rgba(155,154,154,0.18)
}
.works {
width: 66%;
margin: auto;
text-align: center;
padding: 5rem 0 5rem 0
}
.works h3 {
font-size: 3rem;
font-weight: 100;
color: #fff;
letter-spacing: 0.3rem
}
似乎在這裏工作罰款http://jsfiddle.net/j08691/CR76J/。 – j08691