javascript - 固定导航-滚动到特定的 div 或 ID

Question

我在顶部有一个固定的导航:

  <div class="navigation">
      <ul>
         <li><a href="#" id="toggle1" class="contentdown">HOME</a></li>
         <li><a href="#" id="toggle2" class="contentdown">ABOUT</a></li>
         <li class="logo"><img src="images/ogsystemslogo.png" /></li>
         <li>CAREERS</li>
         <li><a href="#" id="toggle3" class="contentdown">CONTACT</a></li>
      </ul>
  </div>

当我单击“联系人”目标时，它会在我的内容区域开头上方展开一个 div。我的问题是，如果用户位于页面顶部，这很好，如果用户说，向下滚动到中间，div 仍然有效，但用户不知道发生了什么，因为 div 不在看法。我的问题是如何让这个目标在页面上用户可以看到它的任何地方工作？另一种说法是，如果用户位于长页面的底部并单击联系人按钮，我如何让页面跳到内容所在的位置以便用户可以看到它？

我试过这个:

1. 在标签下方但在固定导航上方添加了一个 ID ()，希望此处的 javascript 能够正常工作:

       $("#test").click(function () {
       $('html, body').animate({
           scrollTop: $("#uptop").offset().top
       }, 1000);
   });
   

   但这行不通。

我的脚本中也有这个:

        $(document).ready(function () {
        $(this).scrollTop(0);
    });

这样当页面刷新时它就会跳到顶部。

是否有我可以编写的 goTo 函数可以使这项工作正常进行？由于导航用于打开另一个 div，我不确定是否可以将每个链接链接到两个单独的函数。

        <div class="toggle3" style="display: none;">
            <div class="toggle3main">
                <div class="wrapper">
                    <div class="map">
                    </div>

                </div>
            </div>
        </div>

这是JS:

    $(function () {
        $('#toggle3').click(function () {
            $('.toggle3').show('1000');
            $('.toggle2').hide('1000');
            $('.toggle1').hide('1000');
            $('.toggle').text('toggle 3 clicked');
            $('.toggle').slideToggle('1000');

            return false;
        });
    });

Answer 1

只需将 ID yourid 添加到您的联系人 div 并链接到 #yourid。链接的默认行为将为您完成剩下的工作。您始终可以链接顶部 #top 代替。这将始终将您链接到文档的最顶部(根据设计；不需要具有 id top 的元素)。

旁注:我不明白您所说的“我无法使用 href# 也告诉它转到页面顶部” 是什么意思。在您的问题中，您链接到 #。这没有任何作用。您必须有一个使“事情”发生的 onclick 处理程序。如果在该 onclick 处理程序中没有 event.preventDefault() 或 return false，它也应该执行链接的默认事件(转到 href 中定义的位置) .

示例 HTML:

<div class="navigation"><!-- This is fixed -->
  <ul>
    <li><a href="#homediv" id="toggle1" class="contentdown">HOME</a></li>
    <li><a href="#aboutdiv" id="toggle2" class="contentdown">ABOUT</a></li>
    <li class="logo"><img src="images/ogsystemslogo.png" /></li>
    <li>CAREERS</li>
    <li><a href="#contactdiv" id="toggle3" class="contentdown">CONTACT</a></li>
  </ul>
</div>
<div id="contactform"><!-- This is in the normal flow of the document -->
  <!-- The link with id "toggle3" will scroll to this element -->
</div>

编辑:问题是您的 onclick 处理程序中的 return false。这将阻止默认事件。链接到您的联系表单的任何 ID，并且在您的 onclick 处理程序中不返回任何内容或返回 true:

    $('#toggle3').click(function () {
        $('.toggle3').show('1000');
        $('.toggle2').hide('1000');
        $('.toggle1').hide('1000');
        $('.toggle').text('toggle 3 clicked');
        $('.toggle').slideToggle('1000');

        //Changed below
        return true;
    });