我有一个页面，其中一个滚动条包含从数据库动态生成的带有div的表行。每个表行就像一个链接，有点像你在视频播放器旁边看到的YouTube播放列表。
当用户访问页面时，他们所在的选项应该会转到滚动div的顶部。这个功能正在工作。问题是，这有点太过分了。比如他们的选项高了10像素。因此，页面被访问，url被用来识别选择了哪个选项，然后将该选项滚动到滚动div的顶部。注意:这不是窗口的滚动条，这是一个带有滚动条的div。
我正在使用这段代码，使它移动选中的选项到div的顶部:
var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.scrollIntoView(true);
它将它移动到div的顶部，但大约10个像素太高了。 有人知道怎么解决吗?
当前回答
UPD:我已经创建了一个npm包，它比下面的解决方案更好，更容易使用。
我的smoothScroll函数
我采用了Steve Banton的出色解决方案，并编写了一个函数，使其使用起来更方便。使用window.scroll()甚至window.scrollBy()会更容易，因为我以前尝试过，但这两个有一些问题:
一切都变成垃圾后，使用他们与平稳的行为。 你无论如何都不能阻止他们，必须等到卷轴的结尾。 希望我的函数对你们有用。此外，还有一个轻量级的填充程序，可以在Safari甚至IE中运行。
下面是代码
照搬就行，想怎么搞就怎么搞。
import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();
const prepareSmoothScroll = linkEl => {
const EXTRA_OFFSET = 0;
const destinationEl = document.getElementById(linkEl.dataset.smoothScrollTo);
const blockOption = linkEl.dataset.smoothScrollBlock || 'start';
if ((blockOption === 'start' || blockOption === 'end') && EXTRA_OFFSET) {
const anchorEl = document.createElement('div');
destinationEl.setAttribute('style', 'position: relative;');
anchorEl.setAttribute('style', `position: absolute; top: -${EXTRA_OFFSET}px; left: 0;`);
destinationEl.appendChild(anchorEl);
linkEl.addEventListener('click', () => {
anchorEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
if (blockOption === 'center' || !EXTRA_OFFSET) {
linkEl.addEventListener('click', () => {
destinationEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
};
export const activateSmoothScroll = () => {
const linkEls = [...document.querySelectorAll('[data-smooth-scroll-to]')];
linkEls.forEach(linkEl => prepareSmoothScroll(linkEl));
};
要创建一个link元素，只需添加以下data属性:
data-smooth-scroll-to="element-id"
还可以将另一个属性设置为加法
data-smooth-scroll-block="center"
它表示scrollIntoView()函数的块选项。默认为start。在MDN上阅读更多。
最后
根据您的需要调整平滑滚动功能。
例如，如果你有一些固定的标题(或者我用单词masthead来称呼它)，你可以这样做:
const mastheadEl = document.querySelector(someMastheadSelector);
// and add it's height to the EXTRA_OFFSET variable
const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;
如果你没有这样的情况，那就删除它，为什么不:-D。
其他回答
对于表行中的元素，使用JQuery获取所需元素的上方行，然后简单地滚动到该行。
假设我在一个表中有多行，其中一些行应该由和admin检查。需要审查的每一行都有向上和向下的箭头，引导您到上一项或下一项进行审查。
这是一个完整的例子，如果你在记事本中创建一个新的HTML文档并保存它，它应该会运行。还有额外的代码来检测项目的顶部和底部以进行检查，这样我们就不会抛出任何错误。
<html>
<head>
<title>Scrolling Into View</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<style>
div.scroll { height: 6em; width: 20em; overflow: auto; }
thead th { position: sticky; top: -1px; background: #fff; }
.up, .down { cursor: pointer; }
.up:hover, .down:hover { color: blue; text-decoration:underline; }
</style>
</head>
<body>
<div class='scroll'>
<table border='1'>
<thead>
<tr>
<th>Review</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr id='row_1'>
<th></th>
<td>Row 1 (OK)</td>
</tr>
<tr id='row_2'>
<th></th>
<td>Row 2 (OK)</td>
</tr>
<tr id='row_3'>
<th id='jump_1'><span class='up'>UP</span> <span class='down'>DN</span></th>
<td>Row 3 (REVIEW)</td>
</tr>
<tr id='row_4'>
<th></th>
<td>Row 4 (OK)</td>
</tr>
<tr id='row_5'>
<th id='jump_2'><span class='up'>UP</span> <span class='down'>DN</span></th>
<td>Row 5 (REVIEW)</td>
</tr>
<tr id='row_6'>
<th></th>
<td>Row 6 (OK)</td>
</tr>
<tr id='row_7'>
<th></th>
<td>Row 7 (OK)</td>
</tr>
<tr id='row_8'>
<th id='jump_3'><span class='up'>UP</span> <span class='down'>DN</span></th>
<td>Row 8 (REVIEW)</td>
</tr>
<tr id='row_9'>
<th></th>
<td>Row 9 (OK)</td>
</tr>
<tr id='row_10'>
<th></th>
<td>Row 10 (OK)</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready( function() {
$('.up').on('click', function() {
var id = parseInt($(this).parent().attr('id').split('_')[1]);
if (id>1) {
var row_id = $('#jump_' + (id - 1)).parent().attr('id').split('_')[1];
document.getElementById('row_' + (row_id-1)).scrollIntoView({behavior: 'smooth', block: 'start'});
} else {
alert('At first');
}
});
$('.down').on('click', function() {
var id = parseInt($(this).parent().attr('id').split('_')[1]);
if ($('#jump_' + (id + 1)).length) {
var row_id = $('#jump_' + (id + 1)).parent().attr('id').split('_')[1];
document.getElementById('row_' + (row_id-1)).scrollIntoView({behavior: 'smooth', block: 'start'});
} else {
alert('At last');
}
});
});
</script>
</body>
</html>
20秒内搞定:
这个解属于@ arsenie - ii，我只是把它简化成一个函数。
function _scrollTo(selector, yOffset = 0){
const el = document.querySelector(selector);
const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: 'smooth'});
}
使用方法(您可以在StackOverflow中打开控制台并进行测试):
_scrollTo('#question-header', 0);
我目前正在生产中使用它，它工作得很好。
这适用于我的Chrome浏览器(平滑滚动，没有计时黑客)
它只是移动元素，开始滚动，然后再移动回来。
如果元素已经在屏幕上，则不会出现可见的“弹出”。
pos = targetEle.style.position;
top = targetEle.style.top;
targetEle.style.position = 'relative';
targetEle.style.top = '-20px';
targetEle.scrollIntoView({behavior: 'smooth', block: 'start'});
targetEle.style.top = top;
targetEle.style.position = pos;
假设你想滚动到DOM中相同级别的div，并且类名为“scroll-with-offset”，那么这个CSS将解决这个问题:
.scroll-with-offset {
padding-top: 100px;
margin-bottom: -100px;
}
与页面顶部的偏移量为100px。它只会像block: 'start'那样工作:
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
所发生的事情是div的顶部在正常位置，但它们的内部内容开始低于正常位置100px。这就是padding-top:100px的作用。margin-bottom: -100px用来抵消下面div的额外边距。 为了使解决方案完整，还添加了这个CSS来抵消最顶部和最底部div的边距/填充:
.top-div {
padding-top: 0;
}
.bottom-div {
margin-bottom: 0;
}
我有这个，它对我非常有效:
// add a smooth scroll to element
scroll(el) {
el.scrollIntoView({
behavior: 'smooth',
block: 'start'});
setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}
希望能有所帮助。
