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

您不需要绑定事件处理程序以导航到某个部分，正确使用href

URL片段是一个以哈希标记（＃）开头的名称，它指定当前文档中的内部目标位置（HTML元素的ID）。

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

＆＃13;

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

＆＃13;

Answer 2

使用e.preventDefault来阻止锚点的默认操作，您可以使用动画来生成平滑的滚动动画。

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

此外，您必须在每个;之后添加&nbsp，例如： 

请参阅下面的演示工作片段：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强>更新：

如果您要滚动到的元素位于其他页面上，则可以删除用于jQuery的{{1}}代码，只需更改click上的href即可到：

anchor

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"它将滚动到那里但在此之后，页面将转到{{ 1}}因为您为点击的链接URL/Bikes设置了href属性，所以每当加载新页面时，它都会始终排在最前面。
如果您放置<a href="/Bike" id="bike">Bikes</a>锚标记的默认行为将无效，则该页面将不会重定向到e.preventDefault()

如果您打算向下滚动到URL/Bikes div，请将scrolltohere属性设置为href 或者将<a href="#scrolltohere" id="bike">Bikes</a>放在e.preventDefault();点击事件中。

$("#bike").click

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

.section {
  margin-top: 5000px;
}

Jquery在行动后重返顶峰

5 个答案: