Javascript 滚动到ID减去一些像素

我已经有了下面的代码，可以在页面加载时向下滚动到ID（“expressRate”）。但随着要求的改变，页面应该向下滚动到div ID“expressRate”上方50像素的位置。任何帮助都将不胜感激

 $location.hash('expressRate');
 $anchorScroll();

---

在滚动到标签“expressRate”后，尝试此javascript代码

window.location('#expressRate');
window.scrollBy(0,-50);

---

在滚动到标签“expressRate”后，尝试此javascript代码

window.location('#expressRate');
window.scrollBy(0,-50);

//获取元素
var$expressRate=$（“#expressRate”）；
//获取元素与页面顶部的垂直距离
变量verticalPositionOfElement=$expressRate.offset（）.top；
//添加了一个超时，这样您就可以看到开始和结束
//调整
setTimeout（函数（）{
//将窗口向下滚动元素距离，减去任何值
$（窗口）.scrollTop（元素的垂直位置-50）；
}, 1000);
html，正文{
最小高度：5000px；
}
#表达率{
最小高度：200px；
利润上限：1000px；
背景色：红色；
}


//获取元素
var$expressRate=$（“#expressRate”）；
//获取元素与页面顶部的垂直距离
变量verticalPositionOfElement=$expressRate.offset（）.top；
//添加了一个超时，这样您就可以看到开始和结束
//调整
setTimeout（函数（）{
//将窗口向下滚动元素距离，减去任何值
$（窗口）.scrollTop（元素的垂直位置-50）；
}, 1000);
html，正文{
最小高度：5000px；
}
#表达率{
最小高度：200px；
利润上限：1000px；
背景色：红色；
}
对于如此简单的事情，您不需要框架，您可以在尝试滚动到的元素上使用
getBoundingClientRect（）
。比如说：

getBoundingClientRect（）方法返回元素的大小及其相对于视口的位置

假设：
result=b.getBoundingClientRect（）

它将为您提供DOM相关内容中的元素框，但您真正想要的只有一件事：
result.x
coordinate表示像素中的x坐标，并记住视口

现在，您只需使用
window.scrollTo（）
到该元素的x坐标-50px即可滚动到所需的位置

HTML:

JS:

瞧，一种两行香草溶液：）

要快速演示，请看这把小提琴：

注意：在Fiddle中，解决方案要大一点，以向您展示与
结果中的其他内容不同的是，X在加载文档时不会发生变化。
对于如此简单的内容，您不需要框架，您可以在尝试滚动到的元素上使用
getBoundingClientRect（）
。比如说：

getBoundingClientRect（）方法返回元素的大小及其相对于视口的位置

假设：
result=b.getBoundingClientRect（）

它将为您提供DOM相关内容中的元素框，但您真正想要的只有一件事：
result.x
coordinate表示像素中的x坐标，并记住视口

现在，您只需使用
window.scrollTo（）
到该元素的x坐标-50px即可滚动到所需的位置

HTML:

JS:

瞧，一种两行香草溶液：）

要快速演示，请看这把小提琴：

注意：在Fiddle中，解决方案要大一点，以向您展示与
结果中的其他内容不同的是，X在加载文档时不会发生变化。
获取垂直，减去50，然后窗口向下。获取垂直，减去50，findPos函数返回窗口中该div位置的值，如果需要在上面滚动50像素，则可以直接对上面的代码执行相同操作。findPos函数返回窗口中该div位置的值，如果需要在上面滚动50像素，则可以直接对上面的代码执行相同操作代码..我试过你们的代码，发现它工作得很好，我也很感谢你们对每一行代码的评论，这对我帮助很大。非常感谢。谢谢你们的快速回复。我试过你们的代码，发现它工作得很好，我也很感谢你们对每一行代码的评论，这对我帮助很大。非常感谢。谢谢大家的快速回复。
<button id="but" onClick="scrol()">SCROLL TO 50px before</button>
<div id="a"><span id="b">WHERE AM I?</span></div>
<div id="tall">&nbsp;</div>
<pre></pre>

#but { position: fixed; }
#a { padding:16px; position: absolute; top:300px;}
#b { background:yellow;}
#tall { height:2000px }

function scrol(){
  var b = document.querySelector('#b');
  window.scrollTo(b.getBoundingClientRect().x-50, 200);
}