Jquery回到頂部後行動

Question

我使用jquery跳轉到我的網頁的另一部分點擊按鈕。我已經使用以下到：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script> 
     $(document).ready(function(){ 
      $("#bike").click(function(){ 

       location.href = "#scrolltohere"; 

      }); 

     }); 
    </script> 

//這是我點擊

<a href="/Bike" id="bike">Bikes</a> 

//這是我想跳到

<div class="eshop-section section" id="scrolltohere"> 
<h2 style="font-family: 'Lato'; font-size: 40px;" >&nbsp &nbsp &nbsp&nbsp &nbspBikes</h2> 

部分但問題是它會滾動並返回頁面頂部。

在這種情況下該怎麼辦？

Answer 1

使用e.preventDefault可以防止錨點的默認動作，並且您可以使用動畫生成平滑滾動動畫。

$(document).ready(function() { 
    $("#bike").click(function(e) { 
    e.preventDefault(); 
    $('html, body').animate({ 
    scrollTop: $("#scrolltohere").offset().top 
}, 2000); 
    }); 
}); 

此外，你必須每個那些&nbsp像後添加;： 

看到一個示範以下工作片斷請：

$(document).ready(function() { 
 
    $("#bike").click(function(e) { 
 
    e.preventDefault(); 
 
    $('html, body').animate({ 
 
     scrollTop: $("#scrolltohere").offset().top 
 
    }, 2000); 
 
    }); 
 
});

.divider{ 
 
    height: 500px; 
 
    background: #F00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="/Bike" id="bike">Bikes</a> 
 
<div class='divider'></div> 
 
<div class="eshop-section section" id="scrolltohere"> 
 
<h2 style="font-family: 'Lato'; font-size: 40px;" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Bikes</h2>

UPDATE ：

如果要滾動的元素是另一頁上，然後你可以刪除你使用的click的jQuery代碼，只需改變對anchor到href：

<a href="/Bike#scrolltohere" id="bike">Bikes</a> 

Answer 2

你不需要到事件處理程序綁定到導航到一個部分中，使用href正確

的URL片段是由井號（＃），其內的指定一個內部目標位置（一個HTML元素的ID）開頭的名稱目前的文件換貨。

<a href="#scrolltohere">Bikes</a> 

<a href="#scrolltohere">Bikes</a> 
 
<div style="min-height:1200px;"></div> 
 
<div id="scrolltohere">Lorem Ipsum</div>

Answer 3

的Javascript：

$(document).ready(function() { 
    $("#bike").click(function() { 
    location.href = "#scrolltohere"; 
    return false; // Block page from navigating away to /Bike 
    }); 
}); 

HTML：更改div來<a name="scrolltohere"></a>

<a name="scrolltohere"></a> 

Answer 4

<a href="#scrolltohere" id="bike">Bikes</a> 

使用上述聲明的，而不是

<a href="/Bike" id="bike">Bikes</a> 

Answer 5

所以發生的是，當你點擊Bikes鏈接它會觸發$("#bike").click事件，您可以設置location.href="#scrolltohere"將滾動，直到有，但在那之後，頁面將會轉到URL/Bikes，因爲您爲您點擊的鏈接設置了href屬性<a href="/Bike" id="bike">Bikes</a>
所以無論何時加載新頁面，它都會始終保持最高。
如果你把e.preventDefault()錨標記的默認行爲是行不通的，那就是如果你的目的是要向下滾動到scrolltohere DIV任你設置href屬性
<a href="#scrolltohere" id="bike">Bikes</a> 的頁面不會重定向到URL/Bikes

或在$("#bike").click點擊事件中放入e.preventDefault();。

//$(document).ready(function() { 
 
// $("#bike").click(function(e) { 
 
// e.preventDefault(); 
 
// location.href = "#scrolltohere";  
 
// }); 
 
//});

.section { 
 
    margin-top: 5000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<a href="#scrolltohere" id="bike">Bikes</a> 
 

 

 

 
<div class="eshop-section section" id="scrolltohere"> 
 
    <h2 style="font-family: 'Lato'; font-size: 40px;"> 
 
    &nbsp &nbsp &nbsp&nbsp &nbspBikes 
 
    </h2> 
 
</div>