jquery - 在单击按钮窗口时，通过 Bootstrap 中的自定义 JS 向下滚动到部分 ID

Question

我想编辑一个部分，但是当我点击编辑按钮时，该部分位于页面的最底部，用户不明白编辑部分在哪里，所以我为此使用了一个简单的 JS。但是我得到了一个错误，任何人都可以帮助我。

提前致谢!

代码如下:

/*--JS--*/

$("#edit_me").on("click" ,function(){
	scrolled=scrolled-300;
    $("#section-2").animate({
		scrollBottom:  scrolled
	});
});

/*--CSS--*/
	
   .box-1{padding:15%;}
   #edit_me{
	   background:green; 
	   padding:6px 12px;
	   width:150px;
	   display:block;
       color:#fff;
   }
   #section-1, #section-2{min-height:300px; border:solid 3px #000;}

<!--HTML-->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>	
    <a href="section-2" class="btn edit_me" id="edit_me">Edit</a> 
	<div id="section-1">	
		<div class="container">
			<div class="box-1">
				<h1>SECTION-1</h1>
			</div>
		<div>
	<div>
	<div id="section-2">
		<div class="container">
			<div class="box-1">
				<h1>SECTION-2</h1>
			</div>
		<div>
	</div>

Answer 1

是的，您可以为此使用 id，请查看更新后的帖子。它将向上滚动到放置编辑部分的特定位置。

---

$('.click_to_scroll').click(function(){
var clickedId = $(this).attr('href');
$('html, body').animate({ scrollTop: ($(clickedId).offset().top)} , 1000);
return false;
});

#edit {
  width: 100px;
  height: 100px;
  background: #000;
  margin: 800px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#edit" class="click_to_scroll">edit</a>

<div id="edit">
</div>