我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。

我如何用jQuery做到这一点?


当前回答

CSS-Only ? !

一个有趣的css替代方案:

display: flex; 
flex-direction: column-reverse;

  /* ...probably usually along with: */

overflow-y: scroll;  /* or hidden or auto */
height: 100px; /* or whatever */

它不是万无一失的,但我发现它在一些情况下很有帮助。

文档:flex, flex-direction, overflow-y


演示:

var i=0, foo='Lorem Ipsum & foo在酒吧或blah !和“。分割(' '); setInterval(函数(){demo.innerHTML + = foo [i + + % foo。长度)+ ' '},200) #{演示显示:flex; flex-direction: column-reverse; overflow-y:滚动; 宽度:150 px; 身高:150 px; 边框:3px纯黑色;} 身体{字体类型:arial,无衬线; 字体大小:15 px;} Autoscrolling演示:& # x1f43e; < div id =“演示”> < / div >

其他回答

如果在您想要滚动到的位置或附近的任何类型的标记中有一个ID,那么只需使用scrollIntoView函数编写一行JavaScript即可。例如,假设您所讨论的元素是ID为“mydiv1”的DIV

<div id="mydiv1">[your contents]</div>

然后运行JavaScript命令

document.getElementById("mydiv1").scrollIntoView();

根本不需要JQuery。 希望这能有所帮助。

CSS-Only ? !

一个有趣的css替代方案:

display: flex; 
flex-direction: column-reverse;

  /* ...probably usually along with: */

overflow-y: scroll;  /* or hidden or auto */
height: 100px; /* or whatever */

它不是万无一失的,但我发现它在一些情况下很有帮助。

文档:flex, flex-direction, overflow-y


演示:

var i=0, foo='Lorem Ipsum & foo在酒吧或blah !和“。分割(' '); setInterval(函数(){demo.innerHTML + = foo [i + + % foo。长度)+ ' '},200) #{演示显示:flex; flex-direction: column-reverse; overflow-y:滚动; 宽度:150 px; 身高:150 px; 边框:3px纯黑色;} 身体{字体类型:arial,无衬线; 字体大小:15 px;} Autoscrolling演示:& # x1f43e; < div id =“演示”> < / div >

滚动整个页面到底部:

const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

你可以在这里查看演示

将一个特定的元素滚动到底部:

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

下面是演示

它是这样工作的:

参考:scrollTop, scrollHeight, clientHeight

更新:最新版本的Chrome(61+)和Firefox不支持滚动正文,请参阅:https://dev.opera.com/articles/fixing-the-scrolltop-bug/

来晚了,但这里有一些简单的javascript代码,可以将任何元素滚动到底部:

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}

在Selenium中向下滚动使用以下代码:

直到底部下降,滚动直到页面的高度。 使用下面的javascript代码,可以在javascript和React中正常工作。

JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) 
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");