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>