使用 HREF ID 滚动到顶部

scroll to top using href id

本文关键字：顶部 滚动 ID HREF 使用      更新时间：2023-09-26

我想将div滚动到顶部位置。我在获取 href 值时遇到问题。现在"a"返回未定义的console.log(a); 

function myFunction()
	   {
	      var a=$(this).attr('href');
		  console.log(a);
		  $('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500);
 }
#consulting,#segments,#partner,#insights{min-height:100vh;}
   .secMenu{position:fixed;
   }
<div class="container-fluid">
	  <div class="row secMenu">
		<div class="col-md-9 col-sm-12 menu">
		 <ul class="nav navMenu">
		 
			  <li class="test1"><a href="#consulting" onclick="myFunction()">Consulting & Solutions</a></li>
			  <li class="test2"><a href="#segments"  onclick="myFunction()">Segments</a></li>
			  <li class="test3"><a href="#partner"  onclick="myFunction()">Our Partners</a></li>
			  <li class="test4"><a href="#insights"  onclick="myFunction()">Perspectives</a></li>
			</ul>  
		</div>
		
	   </div>   <!--End of second menu -->
	    <div class="row">
	   <div id="consulting">
	   div1
		</div>
		<div id="segments">
		div11
		</div>
		<div id="partner">
		div111
		</div>
		<div id="insights">
		 div1111
		</div>
		</div>
	  </div>

我已经为您使用了的做了一个替代方案，但它做同样的事情。我删除了您使用的函数，改用了jQuery。希望我的答案对您有用：

$('.nav li a').on('click', function(e) {
  e.preventDefault();
  var a = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $(a).offset().top
  }, 500);
});
#consulting,
#segments,
#partner,
#insights {
  min-height: 100vh;
}
.secMenu {
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row secMenu">
    <div class="col-md-9 col-sm-12 menu">
      <ul class="nav navMenu">
        <li class="test1"><a href="#consulting">Consulting & Solutions</a>
        </li>
        <li class="test2"><a href="#segments">Segments</a>
        </li>
        <li class="test3"><a href="#partner">Our Partners</a>
        </li>
        <li class="test4"><a href="#insights">Perspectives</a>
        </li>
      </ul>
    </div>
  </div>
  <!--End of second menu -->
  <div class="row">
    <div id="consulting">
      div1
    </div>
    <div id="segments">
      div11
    </div>
    <div id="partner">
      div111
    </div>
    <div id="insights">
      div1111
    </div>
  </div>
</div>

要查看它的实际效果，您可以点击上面的"运行代码片段"按钮，或者您可以在此处看到一个小提琴。

因为默认情况下this绑定到全局对象（在浏览器中它是window）。

您可以尝试将this传递给myFunction()，如下所示：myFunction(this) 。在myFunction定义中：function myFunction(target) {...}，target现在指的是锚元素。

相关文章：