使用纯Javascript滚动到可滚动DIV中的元素

我有一个div有

溢出：scroll

，div中有一些隐藏的元素。点击页面上的一个按钮，我想让DIV滚动到DIV中的一个特定元素

---

如何实现这一点？

您需要读取需要滚动到的div的

offsetTop

属性，然后将该偏移设置为容器

div的
scrollTop
属性。将此函数绑定到要执行以下操作的事件：


函数scrollToElementD（）{
var topPos=document.getElementById（'internal-element'）.offsetTop；
document.getElementById（'container'）。scrollTop=topPos-10；
}

div{
高度：200px；
宽度：100px；
边框：1px纯黑；
溢出：自动；
}
p{
高度：80px；
背景：蓝色；
}
#内部元素{
背景：红色；
}

A
B
C
D
E
F

滚动到D

您需要读取需要滚动到的div的

offsetTop

属性，然后将该偏移设置为容器

div的
scrollTop
属性。将此函数绑定到要执行以下操作的事件：


函数scrollToElementD（）{
var topPos=document.getElementById（'internal-element'）.offsetTop；
document.getElementById（'container'）。scrollTop=topPos-10；
}

div{
高度：200px；
宽度：100px；
边框：1px纯黑；
溢出：自动；
}
p{
高度：80px；
背景：蓝色；
}
#内部元素{
背景：红色；
}

A
B
C
D
E
F

滚动到D

只是通过在div中包含的列表中设置平滑的自动滚动来改进它

var-topPos=elem.offsetTop
document.getElementById（'mybutton'）。onclick=function（）{
console.log（'单击'）
scrollTo（document.getElementById（'container'），topPos-10600）；
}
函数滚动到（元素、到、持续时间）{
var start=element.scrollTop，
改变=开始，
currentTime=0，
增量=20；
var animateScroll=函数（）{
当前时间+=增量；
var val=Math.easeInOutQuad（当前时间、开始、更改、持续时间）；
element.scrollTop=val；
如果（当前时间<持续时间）{
设置超时（动画滚动，增量）；
}
};
动画滚动（）；
}
//t=当前时间
//b=起始值
//c=价值变化
//d=持续时间
Math.easeInOutQuad=函数（t，b，c，d）{
t/=d/2；
如果（t<1）返回c/2*t*t+b；
t--；
返回-c/2*（t*（t-2）-1）+b；
};

---

我想它可能会帮助某些人：）

只是通过在div中包含的列表中设置平滑的自动滚动来改进它

var-topPos=elem.offsetTop
document.getElementById（'mybutton'）。onclick=function（）{
console.log（'单击'）
scrollTo（document.getElementById（'container'），topPos-10600）；
}
函数滚动到（元素、到、持续时间）{
var start=element.scrollTop，
改变=开始，
currentTime=0，
增量=20；
var animateScroll=函数（）{
当前时间+=增量；
var val=Math.easeInOutQuad（当前时间、开始、更改、持续时间）；
element.scrollTop=val；
如果（当前时间<持续时间）{
设置超时（动画滚动，增量）；
}
};
动画滚动（）；
}
//t=当前时间
//b=起始值
//c=价值变化
//d=持续时间
Math.easeInOutQuad=函数（t，b，c，d）{
t/=d/2；
如果（t<1）返回c/2*t*t+b；
t--；
返回-c/2*（t*（t-2）-1）+b；
};

---

我想这可能会对某些人有所帮助：）

这里有一个简单的纯JavaScript解决方案，它适用于目标数字（scrollTop的值）、目标DOM元素或一些特殊的字符串大小写：

/**
 * target - target to scroll to (DOM element, scrollTop Number, 'top', or 'bottom'
 * containerEl - DOM element for the container with scrollbars
 */
var scrollToTarget = function(target, containerEl) {
    // Moved up here for readability:
    var isElement = target && target.nodeType === 1,
        isNumber = Object.prototype.toString.call(target) === '[object Number]';

    if (isElement) {
        containerEl.scrollTop = target.offsetTop;
    } else if (isNumber) {
        containerEl.scrollTop = target;
    } else if (target === 'bottom') {
        containerEl.scrollTop = containerEl.scrollHeight - containerEl.offsetHeight;
    } else if (target === 'top') {
        containerEl.scrollTop = 0;
    }
};

下面是一些用法示例：

// Scroll to the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget('top', scrollableDiv);

或

或

---

下面是一个简单的纯JavaScript解决方案，它适用于目标数字（

scrollTop

）的值、目标DOM元素或一些特殊的字符串情况：

/**
 * target - target to scroll to (DOM element, scrollTop Number, 'top', or 'bottom'
 * containerEl - DOM element for the container with scrollbars
 */
var scrollToTarget = function(target, containerEl) {
    // Moved up here for readability:
    var isElement = target && target.nodeType === 1,
        isNumber = Object.prototype.toString.call(target) === '[object Number]';

    if (isElement) {
        containerEl.scrollTop = target.offsetTop;
    } else if (isNumber) {
        containerEl.scrollTop = target;
    } else if (target === 'bottom') {
        containerEl.scrollTop = containerEl.scrollHeight - containerEl.offsetHeight;
    } else if (target === 'top') {
        containerEl.scrollTop = 0;
    }
};

下面是一些用法示例：

// Scroll to the top
var scrollableDiv = document.getElementById('scrollable_div');
scrollToTarget('top', scrollableDiv);

或

或

---

请包含一个代码段。它有助于更快地解决您的问题。可能重复的“这是您的问题的提琴”###这解决了我的问题：###[1]：*非常聪明！*请包含一个代码片段。它有助于更快地解决您的问题。可能重复的“这是您的问题的提琴”###这解决了我的问题：####[[1]：*非常聪明！*@JoãoPaiva看起来好像

scrollTo（）

是作为内置函数添加的。只需重命名

scrollTo（）

到其他地方。我会更新答案和小提琴。为什么

topPos-10

？为什么特别是10？@Sumit只是一个随机值，以便与屏幕顶部留出一点间隙。@JoãoPaiva看起来好像

scrollTo（）

是作为内置函数添加的。只需重命名

scrollTo（）

到其他地方。我会更新答案和小提琴。为什么

topPos-10

？为什么特别是10？@Sumit只是一个随机值，以便与屏幕顶部留出一点间隙。

// Scroll to targetElement
var scrollableDiv = document.getElementById('scrollable_div');
var targetElement= document.getElementById('target_element');
scrollToTarget(targetElement, scrollableDiv);