Question

我试图让有可能当某人点击移动到那时页面移动缓慢到有容器分区的地方怎么也不起作用

这是一个看到我的代码正在运行的代码片段

＆＃13;

     $("#myButton").click(function() {
        $('html, body').animate({
            scrollTop: $("#myDiv").offset().top
        }, 2000);} );

＆＃13;

.container{    
    height:400px;
    background-color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="container">
</div>      
 <footer>
 <p class="pull-right"><i class="fa fa-arrow-circle-up"></i>
  <span id="myButton">Move to Up</span>
 </p> &copy; 2018 Sell It, Inc. 
 <a href="#">Terms </a> &middot; 
 <a href="#">Conditions</a>
</footer>

＆＃13;

https://jsfiddle.net/2L2y56pz/2/

额外的问题。单击条款或条件时为什么页面会上升？

Answer 1

为了让它更容易看到它正常工作，我在身体上应用了一个尺寸，向下滚动然后点击“向上移动”以查看它是否正常工作。我刚刚将函数调用方法更改为on('click', ...) 此外，我已在范围中添加了cursor:pointer，以便更清楚它是否可点击。

关于您的额外问题，我认为这是因为您在href中使用的#会导致页面重新加载。

＆＃13;

 $("#myButton").on('click', function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);			
});

＆＃13;

.container{  
  height:400px;
  background-color:red;
}
#myButton{
	cursor: pointer;
}
body{
	height: 750px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="container">
</div> 
 
 <footer><p class="pull-right"><i class="fa fa-arrow-circle-up"></i><span id="myButton">Move to Up</span> </p> &copy; 2018 Sell It, Inc. <a href="#">Terms </a> &middot; <a href="#">Conditions</a></footer>

＆＃13;

编辑额外问题
如果您不希望页面在#上重新加载，请使用真实网址，或者您可以将这些按钮包含在一个部分中并锚定到该部分，如下所示：

＆＃13;

    .container{  
      height:400px;
      background-color:red;
    }
    #myButton{
    	cursor: pointer;
    }
    body{
    	height: 750px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="container">
</div> 

 <footer>
   <p class="pull-right"><i class="fa fa-arrow-circle-up"></i>
      <span id="myButton">Move to Up</span> 
   </p> &copy; 2018 Sell It, Inc. 
<section id='terms_conditions'>
    <a href="#terms_conditions">Terms </a> &middot; <a href="#terms_conditions">Conditions</a>
</section>
 </footer>

＆＃13;

单击跨度移动到div

1 个答案: