Javascript 使用window.onload滚动到特定div，而不添加到web地址

我正在创建一个有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> 

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

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

甚至当我点击另一个页面锚（div）并转到那里时，URL也会被粘贴到MainPage.aspx#section3

我在这里尝试了以下解决方案：

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

删除地址#第3部分并继续使用onload 作用

最好在开始时导航到第3节并 当我更改节时，url会更改

---

我正在使用Visual Studio 2010 Express，以及ASP.NET、JS和C#。在Windows 8.1上，首先有以下重要区别：

• jQuery的

  #section1

  选择器查找ID为“section1”的HTML元素，即

• a href的

  #section1

  URL哈希查找名为“section1”的锚，即

  
  因为您是水平滚动的，所以我认为
  的东西不起作用，所以我会对散列进行加载检查，并在使用预设散列访问页面时滚动到那里。这已在下一个代码段的窗口加载处理程序中完成，并且在没有指定哈希的情况下从第3节开始：
  
  至于从第3节开始加载，请在您的
  $（窗口）.load（）处理程序中包含此项，例如：
  
  $(window).load(function() {
     var startSection = window.location.hash;
     if (startSection == "") startSection = '#section3';
  
     $('.viewport').scrollLeft($(startSection).offset().left);
     window.location.hash = startSection;
  });
  
  免责声明：未经测试的代码：）但是请尝试一下这些，它会让你非常接近你想要实现的目标
  
  希望这有帮助
   为什么不在窗口加载时滚动到该div？从jQuery 1.7开始，使用on更改bind。on（）是将事件处理程序附加到文档的首选方法
  
  所以你的代码应该是这样的
  
  $(document).ready( function(){
      $('ul.nav a ').on('click ', function (event) {
          var $anchor = $(this);
          $('html, body ').stop().animate({
              scrollLeft: $($anchor.attr('href')).offset().left
          }, 1500, 'easeInOutExpo ');
  
          event.preventDefault();
      });
  });
  
  
  $(window).on('load', function () {
  
      $('html, body').stop().animate({
          scrollLeft: $('#section3').offset().left
      }, 1500, 'easeInOutExpo ');
  
  });
  
  感谢您的快速回复，不幸的是它没有改变。@user1821444您看到我关于锚名称与div id的评论了吗？JQuery将“#section3”视为ID为section3的元素，而href=“#section3”将查找名为“section3”的锚。谢谢！！。你的新评论一开始没有被加载——我使用了你的“默认情况下转到部分”解决方案，它成功了。现在我从3开始，没有添加url地址——但是我没有添加返回值false；部分原因是我实际上不知道什么是处理函数：）---我还添加了您建议的，它没有改变任何东西---但无论如何，它现在工作了！！！非常感谢。如果您能建议我现在如何在导航时在URL中表示节名，那将是greatI更新了答案。希望它能涵盖你所有的问题！新的解决方案不起作用：（当我将navigator移到div之外时，它只是停留在第一页，并没有出现在所有页面上。这个解决方案不起作用，以前工作的动画也不起作用，它也没有从第3节开始——请注意，我没有jQuery经验
  $('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;
  });
  
  <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>
  
  .viewport {
    width: 600px;
    overflow: hidden;
    overflow-x: scroll;
  }
  .container {
    width: 1800px;
  }
  .section {
    float: left;
    width: 600px;
  }
  
  $(window).load(function() {
     var startSection = window.location.hash;
     if (startSection == "") startSection = '#section3';
  
     $('.viewport').scrollLeft($(startSection).offset().left);
     window.location.hash = startSection;
  });
  
  $(document).ready( function(){
      $('ul.nav a ').on('click ', function (event) {
          var $anchor = $(this);
          $('html, body ').stop().animate({
              scrollLeft: $($anchor.attr('href')).offset().left
          }, 1500, 'easeInOutExpo ');
  
          event.preventDefault();
      });
  });
  
  
  $(window).on('load', function () {
  
      $('html, body').stop().animate({
          scrollLeft: $('#section3').offset().left
      }, 1500, 'easeInOutExpo ');
  
  });