1

我有一个固定的顶部导航：

  <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;
        });
    });
4

2 回答 2

2

只需将 id 添加yourid到您的联系人 div 并链接到#yourid. 链接的默认行为将为您完成其余的工作。您始终可以链接顶部#top。这将始终将您链接到文档的最顶部（根据设计；不需要带有 id 的元素top）。

旁注：我不明白您的意思是“我无法使用 href# 来告诉它转到页面顶部”。在您的问题中，您链接到#. 这无济于事。您必须有一个使“事情”发生的 onclick 处理程序。如果没有event.preventDefault()或return false在那个 onclick 处理程序中，它也应该执行链接的默认事件（转到 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>

编辑：问题出return false在您的 onclick 处理程序中。这将阻止默认事件。链接到您的联系表单的任何 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;
    });
于 2013-08-23T19:29:08.557 回答
1

原始 Javascript：

var goTo = document.getElementById("uptop").offsetTop;
window.scrollTo(0, goTo);

查询：

$(window).scrollTop($("#uptop").offset().top);

慢速滚动（jQuery UI）：

$('html, body').animate({scrollTop: $("#uptop").offset().top}, 2000);

显示它工作的JSFiddle 。

于 2013-08-23T19:29:14.237 回答