试图将锚标记链接到流星 js 中的 div id

Question

由于某种原因，我似乎无法让我的锚标记链接到页面下方的 div id。这是损坏站点的link，尝试单击它的工作原理并最小化您的窗口以允许滚动，它不会向下滚动页面，我不知道为什么。我现在正在尝试使用 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
}

Answer 1

这最终对我有用。

 Template.postsList.events({
    'click #worksClick': function (evt) {
        $('html, body').animate({
        scrollTop: $("#works").offset().top
    }, 2000);
  }
});

Answer 2

一个 Javascript 监听器阻止了这个。任何event.stopPropagation() 或return false 都绑定在您单击的元素上（body、divs、...）。您的页面在禁用 Javascript 的情况下运行良好，请检查您的所有代码或向我们展示您的 JS。

Answer 3

在 Meteor 中不起作用的锚标记是 known issue。这是一个简单的解决方法：

# Create link to anchor
<li><a href="{{pathFor 'postsList' hash='works'}}">How it works</a></li>

# Set anchor
<div id="works"></div>

Answer 4

对于找到这篇文章的任何人来说，只是对以前的答案的快速改进。这是似乎对我有用的解决方案：

  window.setTimeout(function(){
    if(window.location.hash) {
      let checkContent = $(window.location.hash).length;
      if(checkContent > 0){
        $([document.documentElement, document.body]).animate({
          scrollTop: $(window.location.hash).offset().top
        }, 1000);
      }else{
        window.setTimeout(function(){
          let checkContent = $(window.location.hash).length;
          if(checkContent > 0){
            $([document.documentElement, document.body]).animate({
              scrollTop: $(window.location.hash).offset().top
            }, 1000);
          }
        }, 300);
      }
    }
  }, 300);

只需将其放入您的 onRendered 函数中，它就应该涵盖大多数用例。它检查 # 元素，等待 300 毫秒以渲染内容，然后平滑滚动。如果元素在 300 毫秒后不存在，它会再等待 300 毫秒，然后重试。

我知道它仍然不是 100% 最佳的，但它比我发现的过去解决方案更具防御性。

希望这对某人有所帮助！ :)

Answer 5

您有一个名为 workas 的变量，不确定这是否应该有效。