使用window.onload滾動到特定div而不添加到網址

Question

我正在創建一個包含5個div的頁面。我使用下面的JavaScript代碼horizo​​ntaly他們之間順暢地移動：

$(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'; 

但不幸的是，當我加載頁面的URL地址是

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

即使當我點擊另一個網頁錨（DIV）和去那裏該URL被粘貼到MainPage.aspx＃section3。

我試過的解決方案在這裏：jQuery: how to scroll to certain anchor/div on page load?

但我覺得，因爲我已經使用Javascript來瀏覽的div，它不工作。我想要麼：

1. 刪除地址＃SECTION3部分，同時繼續使用的onload 功能

2. 更妙的是導航到SECTION3開始和有 的URL變化，當我修改的部分

我正在使用Visual Studio 2010 Express與ASP.NET，JS和C＃。在Windows 8.1

Answer 1

首先以下重要區別：

• jQuery的#section1選擇查找具有ID的HTML元素 「SECTION1」，即<div id="section1"></div>
• 的a href的#section1 URL哈希查找的主播名稱爲「section1」，即<a name="section1"></a>

Thi s是你需要檢查和理解的主要區別。所以，你通常需要：

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

但因爲你是橫向滾動，我要做到這一點，而不<a name=...></a>部分和處理窗口加載處理哈希，我將解釋進一步下跌。

接下來是，我會避免將JavaScript變量命名爲「事件」，因爲這看起來非常像關鍵字，所以請嘗試將它重命名爲ev。

如果你想單擊處理不跟隨鏈接點擊（綁定到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; 
}); 

然後，我建議你移動在div divs之外的<ul class="nav">...</ul>，所以你不必在div內重複它。因爲你似乎是滾動左/右，我假設你是浮動的部分的div在很寬的容器彼此相鄰：

<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的申報單以外的1800px容器，由視口600px的包裹）內：

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

對於clearfix類，請參閱Bootstrap's clearfix。

因爲你水平滾動，我認爲<a name=...></a>事情不會工作，所以我會做一個onload檢查散列，並用預設的散列訪問頁面時滾動。這已經在下一個片段中的窗口加載處理程序中完成，並且在沒有指定散列的情況下從第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; 
}); 

聲明：未經測試的代碼！ :)但請嘗試這些，它應該讓你非常接近你想要實現的目標。

希望這會有所幫助！

Answer 2

爲什麼不在窗口加載時滾動到該div？並更改綁定的，在jQuery 1.7。對（）的事件處理程序附加到文件

所以，你的代碼應該是這樣的

$(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 '); 

});