同一页面内锚点跳转失效求助：按钮无法链接到指定div

看起来你是把Bootstrap模态框的触发逻辑和锚点跳转搞混啦，咱们一步步来解决：

核心问题 #

你给<a>标签加了data-toggle="modal"属性——这是Bootstrap专门用来触发模态框弹出的属性，它会直接覆盖a标签原本的锚点跳转行为。所以哪怕你的href="#abc"和目标div的id完全匹配，点击按钮也不会滚动到那个div，而是尝试触发模态框显示（如果模态框依赖的资源没配好，就会看起来完全没反应）。

分场景解决 #

场景1：你确实想实现锚点跳转（滚动到页面中的div） #

那直接移除data-toggle="modal"属性就好，让a标签恢复默认的锚点功能：

<div class="col-sm-6"> 
  <a href="#abc" class="btn btn-success"> 
    <i class="material-icons">&#xE147;</i> 
    <span>Add new course</span> 
  </a> 
</div> 
<p style="height:1000px">space</p> 
<div id="abc" class="modal fade"> 
  <!-- 这里保留你原本的模态框内容 -->
</div>

修改后点击按钮，页面就会自动滚动到id为abc的div位置。

场景2：你本来是想弹出这个模态框，但现在没生效 #

那问题就出在Bootstrap资源的引入上，模态框依赖jQuery和Bootstrap的JS文件，你得确保页面里正确引入了这些资源（顺序不能错，jQuery要在Bootstrap JS之前）：

<!-- 先引入jQuery -->
<script src="jquery.min.js"></script>
<!-- 再引入Bootstrap的JS文件 -->
<script src="bootstrap.min.js"></script>

另外也要确认Bootstrap的CSS文件已经正确引入，这样模态框才能正常显示样式。

内容的提问来源于stack exchange，提问作者nhanncv