当到达底部页面部分时，Jquery用锚文本隐藏Div

Jquery hide Div with anchor text when bottom page section is reached

本文关键字：Jquery 文本 Div 隐藏 分时 底部 面部      更新时间：2023-09-26

我有一个自动滚动功能，有一个静态箭头，可以让用户滚动到页面的下一部分。当用户到达"联系人"部分（最后一页）时，我希望箭头隐藏起来，因为没有其他页面可以向下滚动。

更新-

目前，导航箭头出现在最后一页，但它也出现在关于和介绍部分。。如何修复

Jquery-更新的v3

$(function() {
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');

    event.preventDefault();

    });

 });

function nextSection()
{
var scrollPos = $(document).scrollTop();
$('#section-navigator a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top > scrollPos) {
               var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
        location.hash = "";
        location.hash = currLink.attr("href"); 
        if ($($anchor.attr('href')).attr('id') == "contact") {
$("div.page-scroll").hide();
  }
        return false;

       }

     });
 }

HTML

<div class="page-scroll">
    <img class="arrow-down page-scroll-btn" src="img/arrow_dark.png" onclick="nextSection()" />
</div>

谢谢！

从外观上看，您使用链接作为下一个选择器的id，因此您应该在if.中使用#contact

此外，您在错误的位置关闭了if括号)

if ($anchor.attr('href') == "#contact") {
}

如果你想将其与目标div id进行比较，那么你需要做这样的事情：

if ($($anchor.attr('href')).attr('id') == "contact") {
    $("div.page-scroll").hide();
}

但这似乎是为了得到相同的结果而进行的额外处理

更新

考虑到你所有的编辑——没有一个真的有帮助，因为它们不会创建MCVE——我们似乎离最初的问题越来越远了。我会做以下事情：

在html中手动绑定时，去掉jquery顶部的jquery onclick绑定函数，将下一节函数更改为：

function nextSection() {
  var currentPos = $(document).scrollTop();
  $('#section-navigator a').each(function() {
    var currLinkHash = $(this).attr("href");
    var refElement = $(currLinkHash);
    if (refElement.offset().top > scrollPos) { // change this to offset
      $('html, body').stop().animate({
        scrollTop: refElement.offset().top    // just use refElement
      }, 1500, 'easeInOutExpo');
      location.hash = "";
      location.hash = currLinkHash;
      if (refElement.attr('id') == "contact") {  // hide the scroller if the id is contact
        $("div.page-scroll").hide();   
      }
      return false;
    }
  });
}
相关文章：