Question

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

new_df = df.resample('D')['Data'].agg(['first','last']).dropna(how='all')
new_df['Data_diff'] =  new_df['last'] - new_df['first']
print (new_df)
            first  last  Data_diff
DateTime                          
2016-01-01    1.0   3.0        2.0
2016-03-25    4.0   7.0        3.0
2017-11-09    8.0  13.0        5.0

Answer 1

window.scroll(0,findPos(document.getElementById("expressRate")) - 50);

    function findPos(obj) {
        var curtop = 0;
        if (obj.offsetParent) {
            do {
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
        return [curtop];
        }
    }

Answer 2

//get the element
var $expressRate = $('#expressRate');
//get the vertical distance of the element from the top of the page
var verticalPositionOfElement = $expressRate.offset().top;

//added a timeout just so you could see the start and then the
//adjustment
setTimeout(function () {
  //scroll the window down the element distance, minus whatever
  $(window).scrollTop(verticalPositionOfElement - 50);
}, 1000);

html, body {
  min-height: 5000px;
}

#expressRate {
  min-height: 200px;
  margin-top: 1000px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="expressRate">

Answer 3

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

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

Answer 4

您不需要框架那么简单，可以在要滚动到的元素上使用getBoundingClientRect()。假设：

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

让我们说：result = b.getBoundingClientRect();

它将在DOM相关内容中为您提供元素的框，但您实际上只想做一件事：result.x表示x坐标的像素（牢记VIEWPORT）。

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

HTML：

<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>

CSS：

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

JS：

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

Voila，2线香草溶液：）

有关快速演示，请查看以下小提琴：http://jsfiddle.net/58gzv79h/1/

注意：在Fiddle中，解决方案更大一点，向您展示与result中的其他东西不同，X从加载文档之时起就没有改变。

滚动到ID减去一些像素

4 个答案: