由于某种原因,我似乎无法让我的锚标签链接到页面下方的div ID。这是指向损坏站点的链接,请尝试单击它的工作方式,并最小化窗口以允许滚动发生,它不会向下滚动页面,我不确定为什么。我现在正在尝试使用javascript(特别是jQuery和流星模板事件)解决此问题,我认为流星正在阻止采用经典的方式来执行此操作,但我仍然坚持。
我正在使用流星,所以我认为这可能是我的问题,我现在正在尝试其他解决方案,但是它不起作用
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
}
到此为止,下面为我工作。
Template.postsList.events({
'click #worksClick': function (evt) {
$('html, body').animate({
scrollTop: $("#works").offset().top
}, 2000);
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句