0

我正在使用 javascript 来控制我的页面页面在单击锚链接后滚动到的位置，因为我有一个固定的导航。

我有一页锚+脚本在（PAGE B）上正常工作。我的问题是我在不同的页面（PAGE A）上有按钮，需要在正确工作的页面（PAGE B）上定位锚点。锚本身可以正常工作，但 javascript 不会触发。

它没有触发的原因（通过发出警报而不接收弹出窗口进行测试）是因为 PAGE A 上的按钮的 javascript 不知道在 PAGE B 上查找元素。谷歌搜索三个小时后，我无法弄清楚如何告诉它查看一个新页面，而不仅仅是元素的层次结构。我确信这非常简单，但我是 javascript 的初学者，感谢您的帮助。

编码：

PAGE A 按钮 HTML：

<a href="productsandservices.html#financing" class="btn btn-sm btn-default     
actively2">Learn more</a>

页面 Javascript：

<script>
$("div ul li a[href^='productsandservices.html#']").on('click', function(e) {
  // prevent default anchor click behavior
  e.preventDefault();
  // animate
$('html, body').animate({
   scrollTop: $(this.hash).offset().top - 150
 }, 300, function(){
 });
});</script>

页 B 锚点 HTML：

<div class="col-md-10 col-md-offset-1 col-sm-12 col-xs-12"><section id="financing">

PAGE B：Javascript：（与 PAGE A 完全相同）

$("div ul li a[href^='productsandservices.html#']").on('click', function(e) {
  // prevent default anchor click behavior
  e.preventDefault();
  // animate
$('html, body').animate({
   scrollTop: $(this.hash).offset().top - 150
 }, 300, function(){
 });
});</script>

请和谢谢。

4

2 回答 2

1

页面 B 将永远无法响应上一页上的点击事件，这似乎是您在代码中尝试执行的操作。

尝试使用location.hash来访问哈希。

$(window).on('hashchange', function(e) {
    $('html, body').animate({
        scrollTop: $(location.hash).offset().top - 150
    }, 300);
});
于 2014-08-22T18:24:39.147 回答
0

我也想出了一个不同的解决方案。

我移动添加了一个名称，并将它们放在前一个 div 的末尾部分 id 之前。然后我为锚的每个标题添加了一些额外的填充。这样，我可以顺利地前往不同页面上的锚点。可以说，这并不能解决我的 javascript 问题，但它可以算作（不太严重）被黑客入侵的解决方法。

不确定贡献是否值得，但由于我一直在问并且从不提供解决方案，因为我仍在学习，我想我至少可以回答我自己的问题！

基本上，而不是拥有

<div class="a">
  <section id="a"><h2>Title</h2></section>
  <p>yadda yadda</p>
</div>

<div class="b">
  <section id="b"><h2>Title</h2></section>
  <p>yadda yadda</p>
</div>

<div class="c">
  <section id="c"><h2>Title</h2></section>
  <p>yadda yadda</p>
</div>

我为css中的每个div添加了30px的填充：

div.a, div.b, div.c {
  padding:30px 0px;
}

并在有问题的 div 上方的部分中添加了一个名称，如下所示：

亚达亚达

 

<div class="a">
  <section id="a"><h2>Title</h2></section>
  <p>yadda yadda</p>
  <a name="#b">&nbsp;</a>
</div>

<div class="b">
  <section id="b"><h2>Title</h2></section>
  <p>yadda yadda</p>
  <a name="#c">&nbsp;</a>
</div>

<div class="c">
  <section id="c"><h2>Title</h2></section>
  <p>yadda yadda</p>
</div>

我知道使用 HTML5 会贬低 a 名称，但 drupal 7 在识别相对锚点方面存在问题。这也解决了这个问题。

于 2014-09-26T13:18:38.443 回答