Scroll 滚动视图动画

我的密码在

JS是：

函数延迟（）{
月=7//8月
//预期月为零相对月
现在=新日期（）.getDate（），
rows=document.getElementById（'classic'）.rows；
如果（新日期（）.getMonth（）！=预定月份）{
//此处需要小于1的值，
//或者这个月的第一个方框将是红色的
现在=0.5
};
for（var i=0，rl=rows.length；i

---

我需要找到一种方法来平滑

.scrollintoview（）

。现在它“跳转”到高亮显示的行。我需要它来顺利过渡到那一排。它需要动态地替换scrollintoview。有什么想法吗？谢谢。

也许您不想仅仅为了实现此功能而添加jQuery。elem是要滚动的元素。可以从要移动到视图中的元素的offsetTop属性中获取目标位置

function Scroll_To(elem, pos)
{
    var y = elem.scrollTop;
    y += (pos - y) * 0.3;
    if (Math.abs(y-pos) < 2)
    {
        elem.scrollTop = pos;
        return;
    }
    elem.scrollTop = y;
    setTimeout(Scroll_To, 40, elem, pos);   
}

功能滚动到（元素、位置）
{
变量y=元素滚动顶部；
y+=（pos-y）*0.3；
if（数学绝对值（y位置）<2）
{
元素scrollTop=位置；
返回；
}
元素scrollTop=y；
设置超时（滚动至，40，元素，位置）；
}

我也在搜索这个问题，找到了这个解决方案：

$('html, body').animate({
    scrollTop: $("#elementId").offset().top
}, 1000);

资源：

---

使用

requestAnimationFrame

在特定持续时间内平滑滚动，无需jQuery

演示：

window.bringIntoView\u start=0；
window.bringIntoView_ends=0；
window.bringIntoView_y=0；
window.bringIntoView_tick=函数（）{
var distanceLeft，dt，持续时间，t，行程；
t=日期。现在（）；
如果（t

例如：

它应该随着

dt

（deltaTime）变大而加速，随着

distance left

get变小而减速。我考虑过，如果用户滚动，我会打破循环。全局变量阻止上一个调用完全接管，但不会取消上一个递归循环，因此它的动画速度将提高一倍。

在大多数现代浏览器（）中，您可以将对象中的选项传递给

。scrollIntoView（）

试试这个：

elm.scrollIntoView({ behavior: 'smooth', block: 'center' })

function scroll_into_view_smooth(elem)
{   var FPS = 48; // frames per second
    var DURATION = 0.6; // sec
    var e = elem;
    var left = e.offsetLeft;
    var top = e.offsetTop;
    var width = e.offsetWidth;
    var height = e.offsetHeight;
    var body = document.body;
    var to_scroll = [];
    var p, offset;
    while ((p = e.offsetParent))
    {   var client_width = p.clientWidth;
        var client_height = p!=body ? p.clientHeight : Math.min(document.documentElement.clientHeight, window.innerHeight);
        if (client_width<p.scrollWidth-1 && ((offset=left-p.scrollLeft)<0 || (offset=left+width-p.scrollLeft-client_width)>0))
        {   to_scroll.push({elem: p, prop: 'scrollLeft', from: p.scrollLeft, offset: offset});
        }
        if (client_height<p.scrollHeight-1 && ((offset=top-p.scrollTop)<0 || (offset=top+height-p.scrollTop-client_height)>0))
        {   to_scroll.push({elem: p, prop: 'scrollTop', from: p.scrollTop, offset: offset});
        }
        e = p;
        left += e.offsetLeft;
        top += e.offsetTop;
    }
    var x = 0;
    function apply()
    {   x = Math.min(x+1/(DURATION * FPS), 1);
        for (var i=to_scroll.length-1; i>=0; i--)
        {   to_scroll[i].elem[to_scroll[i].prop] = to_scroll[i].from + to_scroll[i].offset*x*x;
        }
        if (x < 1)
        {   setTimeout(apply, 1000/FPS);
        }
    }
    apply();
}

---

其他值是

behavior:'instant'

或

block:'start'

或

block:'end'

。请参见

您只需要包含此polyfill，它就可以工作了

使用本机scrollIntoView方法

document.getElementById('parallax-group-logo').scrollIntoView({
    block: "start",
    behavior: "smooth"
});

试试这个：

elm.scrollIntoView({ behavior: 'smooth', block: 'center' })

function scroll_into_view_smooth(elem)
{   var FPS = 48; // frames per second
    var DURATION = 0.6; // sec
    var e = elem;
    var left = e.offsetLeft;
    var top = e.offsetTop;
    var width = e.offsetWidth;
    var height = e.offsetHeight;
    var body = document.body;
    var to_scroll = [];
    var p, offset;
    while ((p = e.offsetParent))
    {   var client_width = p.clientWidth;
        var client_height = p!=body ? p.clientHeight : Math.min(document.documentElement.clientHeight, window.innerHeight);
        if (client_width<p.scrollWidth-1 && ((offset=left-p.scrollLeft)<0 || (offset=left+width-p.scrollLeft-client_width)>0))
        {   to_scroll.push({elem: p, prop: 'scrollLeft', from: p.scrollLeft, offset: offset});
        }
        if (client_height<p.scrollHeight-1 && ((offset=top-p.scrollTop)<0 || (offset=top+height-p.scrollTop-client_height)>0))
        {   to_scroll.push({elem: p, prop: 'scrollTop', from: p.scrollTop, offset: offset});
        }
        e = p;
        left += e.offsetLeft;
        top += e.offsetTop;
    }
    var x = 0;
    function apply()
    {   x = Math.min(x+1/(DURATION * FPS), 1);
        for (var i=to_scroll.length-1; i>=0; i--)
        {   to_scroll[i].elem[to_scroll[i].prop] = to_scroll[i].from + to_scroll[i].offset*x*x;
        }
        if (x < 1)
        {   setTimeout(apply, 1000/FPS);
        }
    }
    apply();
}

功能滚动到平滑视图（elem）
{var FPS=48；//每秒帧数
变量持续时间=0.6；//秒
var e=元素；
var left=e.offsetLeft；
var top=e.offsetTop；
var宽度=e.offsetWidth；
var高度=e.离地高度；
var body=document.body；
var to_scroll=[]；
var p，抵销；
而（（p=e.offsetParent））
{var client_width=p.clientWidth；
var client_height=p！=body？p.clientHeight:Math.min（document.documentElement.clientHeight，window.innerHeight）；
如果（client_width只是为了增加这个，以防对某人有所帮助

我正在为iOS和Android开发一个PWA，并使用
scrollIntoView（）
方法，直到我发现Safari不支持
scrollIntoViewOptions
对象，因此无法平滑滚动或其他任何操作

我能够模仿
scrollIntoView
的功能，使用平滑滚动和“最近的”选项，用于带有纯JS的iOS…嗯，纯类型脚本

单击处理程序或w/e:

const element = *elementToScrollIntoView*;
const scrollLayer = *layerToDoTheScrolling*

if (/iPad|iPhone|iPod/.test(navigator.userAgent) {
    let position;
    const top = element.offsetTop - scrollLayer.scrollTop;
    if (element.offsetTop < scrollLayer.scrollTop) {
            // top of element is above top of view - scroll to top of element
        position = element.offsetTop;
    } else if (element.scrollHeight + top < scrollLayer.offsetHeight) {
            // element is in view - don't need to scroll
        return;
    } else if (element.scrollHeight > scrollLayer.offsetHeight) {
            // element is bigger than view - scroll to top of element
        position = element.offsetTop;
    } else {
            // element partially cut-off - scroll remainder into view
        const difference = scrollLayer.offsetHeight - (element.scrollHeight + top);
        position = scrollLayer.scrollTop - difference;
    }
        // custom function for iOS
    scrollToElement(scrollLayer, position, 200);
} else {
        // just use native function for Android
    element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
}

scrollToElement(scrollLayer, destination, duration) {
    if (duration <= 0) {
        return;
    }
    const difference = destination - scrollLayer.scrollTop;
    const perTick = (difference / duration) * 10;

    setTimeout(() => {
        scrollLayer.scrollTop = scrollLayer.scrollTop + perTick;
        if (scrollLayer.scrollTop === destination) {
            return;
        }
        scrollToElement(scrollLayer, destination, duration - 10);
    }, 10);
}

您可以尝试将evt.preventDefault（）添加到函数中。这将覆盖正常的“单击链接”功能。例如：

    // Scroll to anchor ID using scrollTO event
function linkClicked(evt) { // function to listen for when a link is clicked
  evt.preventDefault();
  evt.scrollIntoView({behavior: 'smooth'});

}

// Scroll to section on link click
navBar.addEventListener('click', linkClicked);

我遇到了无限递归的问题。我用
Math.round（（pos-y）*0.3）；
和
Math.abs（y-pos）修复了它。这是最好的答案。它平滑地滚动到所需的位置。THX！奇怪。看起来你需要使用
窗口。滚动到（x，0）
与StackOverflow.huh上的
.scrollTop
不同，Firefox比ChromeNowadays做得更好的一件事是它在所有主要浏览器中都能正常工作。唯一的兼容性问题是平滑的行为，但并不完全兼容：使用polyfill使scrollintoviewoptions浏览器独立于polyfill，这样就完成了：）
scrollToElement(scrollLayer, element.offsetTop, 200);

    // Scroll to anchor ID using scrollTO event
function linkClicked(evt) { // function to listen for when a link is clicked
  evt.preventDefault();
  evt.scrollIntoView({behavior: 'smooth'});

}

// Scroll to section on link click
navBar.addEventListener('click', linkClicked);