Question

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

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

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

代码：

PAGE A按钮HTML：

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

PAGE 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>

PAGE 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>

请和谢谢。

Answer 1

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

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

$(window).on('hashchange', function(e) {
    $('html, body').animate({
        scrollTop: $(location.hash).offset().top - 150
    }, 300);
});

Answer 2

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

我移动了添加了一个名字，并将它们放在了节ID之前的前一个div的末尾。然后我在锚的每个标题中添加了一些额外的填充。通过这种方式，我可以顺利地前往不同页面上的锚点。可以说，这并不能解决我的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上方的部分添加了一个名称，如下所示：

yadda yadda

<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折旧的，但是drupal 7在识别相对锚时存在问题。这也解决了这个问题。

我需要在一个页面上使用javascript来影响不同页面上的元素

2 个答案: