JavaScript设置页面元素的滚动条一直最下方

avaScript

在我们制作html网页的时候，有时候需要某个元素（比如说div）的滚动条一直在最下方，那么我们该怎么做呢？

先上代码：

window.onload = SetScroll;// 不要括号

function SetScroll(){

//读取需要设定的元素高度

var height=$("#showwindows")[0].scrollHeight;

//设置元素的滚动条位置在高度数据地方就是最下方

$("#showwindows").scrollTop(height);

}

程序执行流程如下：

1、页面加载时自动调用JavaScript中的SetScroll方法；

2、设置height为需要设置滚动条元素的高度；

3、设置元素的滚动条位置为元素高度，就是元素的最下方位置。

到顶部的功能现在基本上是网页的标配了，当你已经浏览到页面底部时，一键返回顶部的功能确实非常方便。随着用户习惯的养成，这个功能都是页面必备的。那么作为一个前端开发者，我们如何实现这个实用又酷炫的功能呢？今天小编帮大家汇总了五种实现方法，觉得有用记得点赞，转发哦。

1.锚点

使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的位置。原理和实现都很简单，核心就是通过锚点跳转到指定元素位置，然后把要跳转的元素放到页面顶部。

2.scrollTop

scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度。可以利用scrollTop来实现回到顶部的功能，修改body的scrollTop。示例如下：

3.scrollTo()

scrollTo(x,y)是js原生的方法，作用是滚动当前window中显示的文档至（x,y）点。这是很常用的一种方法，设置scrollTo(0,0)就可以实现回到顶部的效果。示例如下：

4.scrollBy()

scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量。只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果。

5.scrollIntoView()

Element.scrollIntoView方法可以滚动当前元素，使其进入浏览器的可见区域。该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true。

使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果。

关于实现回到顶部功能的方法就和大家分享到这里，希望能对你的工作有帮助。如果你觉得本篇文章对你有帮助，欢迎点赞，评论，转发。

高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

哎呀呀~实在是抱歉备注标签我记错了QAQ

这个才是备注标签不是//

首先我们先来学习上节课留下的剧透，分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿，其实他还有兄弟姐妹啦~

看图，代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

如图所示，h1标签是最大的，h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~

2.段落标签 p标签

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接看代码：

href是什么东西啊？是a标签的属性啦~里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片，是不是有点小意思~

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a>

</body>

</html>

4.图像标签 img标签

图像标签标签如其意，就是用来上传图像的一个标签~~

我们这里介绍一下img的两个属性:

src就是用来放图片的地址的，他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

我们把图片的地址破坏后，就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下，老师~~~我不知道

看视频

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk，好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

完成后作业发再评论区哦，有什么不懂的可以留言包回答的。

加油呀，每天学一点争取做出属于自己的一个网页~

上一期

在线咨询

上一篇：深入理解JavaScript中的箭头函数
下一篇：初始HTML-表格标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript设置页面元素的滚动条一直最下方

1.锚点

2.scrollTop

3.scrollTo()

4.scrollBy()

1.标题标签h1~h6

2.段落标签 p标签

3.链接标签 a标签

4.图像标签 img标签

您的项目需求