javascript - 使用 window.onload 滚动到特定 div，而不添加网址

Question

我正在创建一个包含 5 个 div 的页面。我使用以下 JavaScript 代码在它们之间平滑地水平移动:

    $(function () {
    $('ul.nav a').bind('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
        scrollLeft: $($anchor.attr('href')).offset().left
        }, 1500,'easeInOutExpo');

        event.preventDefault();
    });
});

Div 是这样的:

 <div class="section white" id="section5">
            <h2>Technologies</h2>
            <p>
                text

            </p>
            <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li><a href="#section2">2</a></li>
                <li><a href="#section3">3</a></li>
                <li><a href="#section4">4</a></li>
                <li>5</li>
            </ul>
        </div> 

我想在页面加载时从 div # 3 开始。唯一有效的解决方案是 onload 函数:

window.onload = window.location.hash = 'section3';

但不幸的是，当我加载页面时，网址地址是

http://localhost:51551/trial1/MainPage.aspx#section3

即使当我单击另一个页面 anchor (div) 并转到那里时，URL 也会粘在 MainPage.aspx#section3 上。

我在这里尝试了解决方案:jQuery: how to scroll to certain anchor/div on page load?

但我认为因为我已经使用 Javascript 来导航 div，所以它不起作用。我想要:

1. 删除地址#section3部分并继续使用onload 功能

2. 更好的是在开始时导航到第 3 节并有 当我更改部分时，网址会更改

我正在使用 Visual Studio 2010 Express，以及 ASP.NET、JS 和 C#。在 Windows 8.1 上

Answer 1

首先有以下重要区别:

• jQuery 的 #section1选择器查找 ID 为“section1”的 HTML 元素，即 <div id="section1"></div>
• a href 的 #section1 URL 哈希查找名为“section1”的 anchor ，即 <a name="section1"></a>

这是您需要检查和理解的主要区别。所以你通常需要:

<a name="section1"></a>
<div id="section1">... your content here ...</div>

但是由于您是水平滚动的，所以我将在没有 <a name=...></a> 的情况下执行此操作部分并在窗口加载处理程序中处理哈希，我将在下面进一步解释。

接下来，我会避免将 JavaScript 变量命名为“event”，因为它看起来非常像关键字，因此请尝试将其重命名为 ev .

如果您希望点击处理程序(绑定(bind)到 click 事件的函数)不跟随点击的链接，则该函数应返回 false:

$('ul.nav a').click(function (ev) {
    var anchor = $(this);
    $('.viewport').stop().animate({
        scrollLeft: $($(anchor).attr('href')).offset().left
    }, 1500,'easeInOutExpo');

    // Add the section ID to the URL
    window.location.hash = $(anchor).attr('href').substring(1);

    ev.preventDefault();
    return false;
});

那么，我建议您移动 <ul class="nav">...</ul>在部分 div 之外，因此您不必在 div 内重复它。因为您似乎在向左/向右滚动，所以我假设您将部分 div float 在一个宽容器中彼此相邻:

<div class="viewport">
    <div class="container clearfix">
        <div class="section" id="section1">
            <h2>Technologies</h2>
            <p>Text</p>
        </div>
        <div class="section" id="section2">
            ... content ...
        </div>
        <div class="section" id="section3">
            ... content ...
        </div>
    </div>
</div>
<ul class="nav">
    <li><a href="#section1">1</a></li>
    <li><a href="#section2">2</a></li>
    <li><a href="#section3">3</a></li>
</ul>

使用以下 CSS(以 3 600px div 为例，它们在 1800px 容器内彼此相邻 float ，由 600px 视口(viewport)包裹):

.viewport {
  width: 600px;
  overflow: hidden;
  overflow-x: scroll;
}
.container {
  width: 1800px;
}
.section {
  float: left;
  width: 600px;
}

对于clearfix类，引用Bootstrap's clearfix .

因为你是水平滚动的，所以我认为 <a name=...></a>事情不起作用，所以我会对哈希值进行加载检查，并在使用预设哈希值访问页面时滚动到那里。这已在下一个代码片段的窗口加载处理程序中完成，并且在未指定哈希时从第 3 节开始:

至于从第 3 节开始加载，请将其放在您的 $(window).load() 中处理程序，例如:

$(window).load(function() {
   var startSection = window.location.hash;
   if (startSection == "") startSection = '#section3';

   $('.viewport').scrollLeft($(startSection).offset().left);
   window.location.hash = startSection;
});

免责声明:未经测试的代码!:)但是请尝试这些，它应该会让您非常接近您想要实现的目标。

希望这有帮助!