jQuery scrollTop 问题答案

【问题标题】：JQuery scrollTop issuejQuery scrollTop 问题
【发布时间】：2019-12-02 19:53:19
【问题描述】：

我会直接跳到问题上。我的网页中有一些部分，每个部分都有一个 ID，并且我有一个固定的导航栏，其中包含指向这些部分的链接。所以我想滚动到这些部分并使用偏移量，这样它就不会与我的导航栏重叠。我使用了这段代码：

$('a[href^="#"]').on('click', function(event) {
    var target = $(this.getAttribute('href'));
    if( target.length ) {
        event.preventDefault();
        $('html, body').stop().animate({
            scrollTop: target.offset().top
        }, 1000);
    }
});

好吧，它在 chrome 中完美运行，但在边缘和 chrome incognito 中都不起作用。它有点停用链接，它们不起作用。我在这个站点和其他站点上测试了很多不同的解决方案，但没有一个解决了这个问题。唯一的一种解决方案是这个 css 代码：

:target::before {
  content: "";
  display: block;
  height: 45px; /* fixed header height*/
  margin: -45px 0 0; /* negative fixed header height */
}

这是完美的，但唯一的问题是我在 wordpress 上有这个网站，所以有这个管理栏，正如我所说，我也有一个固定的导航栏，所以在某些情况下偏移值必须改变。我还寻找使用 jquery 更改该值，但我遇到了另一个问题，即选择 css 属性。我找不到选择 ':target::before' 并更改其属性的方法。我真的不关心动画。我只是想让这件事起作用。感谢您的帮助。

【问题讨论】：

标签： jquery html css google-chrome microsoft-edge

【解决方案1】：

您可以尝试参考下面的示例可能会帮助您解决问题。

代码在 MS Edge 中运行良好，在 Chrome 隐身模式下也运行良好。

代码在固定导航栏和页面上的其他元素之间留出适当的空间。

例子：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){


$("#tp").click(function(){

   var jump = $("#top").attr('href');

    var new_position = $(jump).offset();

	var n= new_position.top - 60;
    $('html, body').stop().animate({ scrollTop: n}, 500);
	
	

  });
  
  $("#mdl").click(function(){

   var jump = $("#middle").attr('href');

    var new_position = $(jump).offset();
	var n= new_position.top - 60;
    $('html, body').stop().animate({ scrollTop: n }, 500);
	


  });
  
  $("#btm").click(function(){

   var jump = $("#bottom").attr('href');

    var new_position = $(jump).offset();
	var n= new_position.top - 60;
    $('html, body').stop().animate({ scrollTop: n }, 500);
	
	

  });
  
});
</script>
<style>
body {

padding-top:50px;

}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
 
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 10px;
  height: 1500px; /* Used in this example to enable scrolling */
}
a {
  background: orange;
  color: #444;
  font-family: sans-serif;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  display: block;
}

#star {
  text-align: center;
  font-size: 100px;
  line-height: 500px;
  color: #ddd;
}
Resources
</style>
</head>
<body>


<div class="main">
<div class="navbar">
  <a href="#1" id="tp">Top</a>
  <a href="#2" id="mdl">Middle</a>
  <a href="#3" id="btm">Bottom</a>
</div>

<a href="#top" id="top">Top element</a>

<div id="star">&star;</div>


<a href="#middle" id="middle">Middle element</a>

<div id="star">&star;</div>


<a href="#bottom" id="bottom">Bottom element</a>

<div id="star">&star;</div>

<div id="star">&star;</div>
</div>

</body>
</html>

在 MS Edge 浏览器中的输出：

Chrome 隐身模式下的输出：

【讨论】：