如何使div切换到底部固定后滚动到div？
要使div切换到底部固定后滚动到div，可以通过以下步骤实现：
- 首先，将div的CSS属性设置为固定定位（position: fixed）并将其放置在底部（bottom: 0）。
- 然后，使用JavaScript来控制滚动行为。可以通过监听滚动事件，在滚动到一定位置时，将滚动条滚动到div的位置。
- 在滚动事件中，获取div的高度（offsetHeight）和文档的高度（document.documentElement.scrollHeight）。
- 判断滚动条的位置是否已经滚动到div的位置，可以通过比较滚动条的位置（window.pageYOffset）和文档的高度减去div的高度的差值。
- 如果滚动条已经滚动到div的位置，则不进行任何操作；否则，使用滚动条的scrollTo方法将滚动条滚动到div的位置。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
position: fixed;
bottom: 0;
height: 200px;
width: 100%;
background-color: #f1f1f1;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="myDiv">
<!-- 这里是div的内容 -->
</div>
<script>
window.addEventListener('scroll', function() {
var div = document.getElementById('myDiv');
var scrollHeight = document.documentElement.scrollHeight;
var divHeight = div.offsetHeight;
var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPosition < scrollHeight - divHeight) {
window.scrollTo(0, scrollHeight - divHeight);
}
});
</script>
</body>
</html>这段代码中，我们首先将一个id为"myDiv"的div设置为固定定位，并将其放置在底部。然后，通过JavaScript监听滚动事件，判断滚动条的位置是否已经滚动到div的位置，如果没有，则使用滚动条的scrollTo方法将滚动条滚动到div的位置。
在实际应用中，可以根据具体需求对div的样式进行调整，并根据需要添加其他功能，如动画效果等。
相关·内容
2回答
我正在尝试切换我的div到一个固定的底部，当它出现在屏幕上时，上下滚动。 我找到了这个堆栈溢出主题，它完成了我想要做的事情，但在顶部的HERE.
浏览 34提问于2020-06-25得票数 0
这似乎很基本，但我正在尝试获得一个固定位置的页脚div，当用户滚动到网页的最底部时，可以滑动和淡入，然后在用户滚动回滚时滑动和淡出。我搜索过堆栈溢出，其他人也提出了解决方案，但我的代码导致div只能滑动和淡入。当用户滚动回滚时，我无法让div滑出&淡出。
同样，这个div幻灯片&在我开始滚动之后就消失了。我需要它等待，直到它到达页面底部(或一个无形的div，我可以放置在页面底
浏览 4提问于2012-07-10得票数 2
回答已采纳
1回答
我有一个侧边栏，它固定在文档顶部，它将元素从正常的html流中分离出来。<div id="content"> <ul> <li>link</li>
<li>link<
浏览 2提问于2014-05-09得票数 0
我有一个固定职位部门： width: 300px; float: right; position: fixed;}
一旦我滚动到页面底部，我就有一个高度为210 to的页脚。一旦我滚动到页面底部，我的固定div就
浏览 1提问于2016-01-07得票数 0
回答已采纳
4回答
底部的文本位于它应该在的位置，当我向下滚动脚本激活时。编辑 var $div = $("#nav_color"); if ($(window}
$(window).scroll(fixDiv);
当用户滚
浏览 3提问于2015-07-21得票数 3
6回答
如何使div在滚动到div后保持不变？我有一个稍后在页面中的div，您需要滚动才能转到该div。如果我使用： position: fixed;div将在正常显示之前出现。也许我需要的一个很好的例子是上的第二个广告。如果你的屏幕分辨率足够低，你在加载首页后将看不到该广告，但在向下滚动后，你会看到第二个广告，当你向下滚动时，它将保持不变。
浏览 2提问于2013-04-06得票数 74
回答已采纳
1回答
我试着调整这个例子，使它的工作方式是固定的div对齐到屏幕的底部，直到你滚动到它的父级的底线，当滚动到更低的位置时，它应该停留在那里。调整没有好的结果，所以我在这里问它应该如何做？
浏览 0提问于2014-08-10得票数 0
当css类向下滚动到另一个html元素时，我想动态地向html元素添加一个css类，并在用户滚动回页时删除这个类。具体来说，我想要更改位置:将div元素固定为位置:当div元素到达页脚DIV的顶部时是绝对的，这样就可以有效地停止DIV元素固定在屏幕底部，并停留在页脚div的顶部，这样它就会保持在那里，而用户则继续向下滚动页面的其余部分the scrollHeight
menu.removeClass('fixedPosi
浏览 4提问于2017-09-01得票数 2
回答已采纳
如何在通过jQuery.load()注入内容后将固定位置的div滚动到顶部？ 我有一个屏幕外的div。点击一下按钮，它就会加载()的内容到其中并出现。在现在可见的div的底部有一个上一个/下一个分页。分页加载上一个/下一个内容块，但滚动位置保持在靠近分页的底部。 一旦加载了新的内容，我想让它重新定位到固定div的顶部。
浏览 13提问于2021-01-18得票数 0
我正在做一个项目，其中的标题和整页图像横幅是固定的位置。我如何定位我的那个div，使它从底部滚动到顶部，保持横幅固定在后面。
浏览 4提问于2015-07-26得票数 0
回答已采纳
1回答
如何使用overflow: scroll创建一个固定的div，使body在悬停和滚动时不会滚动？有点像facebook.com窗口底部固定的聊天框。我在这里已经尽可能地简化了问题：
目标是在固定的"bar“div中上下滚动，而不移动"foo”的身体。如果"bar“div一直滚动到底部，而我一直在滚动，我不想让正文开始滚动。当鼠标不在固定的div
浏览 4提问于2017-07-19得票数 8
我正在尝试使用javascript代码在ajax请求$("#chatmessages").scrollTop($("#chatmessages")[0].scrollHeight);之后滚动到div的底部，但是每当我有这样的代码时，它都不让我回滚，因为我让我的javascript每秒检查一个php文件，检查mysql数据库中是否有新的记录。">
</div
浏览 1提问于2014-04-21得票数 0
注意，中央容器与页面滚动条一起滚动，将链接容器保持在左侧和右侧的固定位置。滚动到容器底部后，页面的其余部分将被滚动以显示页脚。到目前为止，我已经尝试了put溢出:自动放在中央容器和外部容器上。当页面被滚动时，当滚动到中央容器的底部时，我想滚动中央容器，我想滚动页面的其余部分(页脚等等)。"></div>
<div class="main_content"><
浏览 0提问于2020-09-28得票数 0
回答已采纳
2回答
我有一个固定高度的div和一个overflow-y: scroll;的样式属性。我需要知道如何使用JQuery滚动到这个div的底部。我找到的所有解决方案都涉及到动画身体和html，但我还没有找到用overflow-y: scroll;滚动div的解决方案。
下面的代码是我所拥有的，但是它会立即滚动到底部；我需要一个平滑的滚动。$('#my-div').animate({scro
浏览 0提问于2018-01-26得票数 0
回答已采纳
2回答
一个简单的设置：顶部导航有一个切换图标，以显示侧边栏<aside>。边栏项被包装在一个<div id='swap'>中。其中一个侧边栏项目需要在底部，我已经把它的位置固定。animate({ width: "toggle" }, 200); });单击将主要内容快速移动到右侧，并使
浏览 0提问于2018-02-02得票数 1
回答已采纳
1回答
我已经创建了一个按钮在屏幕的右下角和页脚在屏幕的底部，我已经使按钮它的位置:固定我想要改变位置到绝对滚动到达我的css的页脚： position:fixed;.affixouterHeight(true), }我的页脚： <div
浏览 6提问于2020-02-18得票数 0
我有一个div，当用户选中某个复选框时，它会变得更高。我发现将此样式添加到div确实有效。.fixed-top {
浏览 1提问于2020-02-26得票数 0
3回答
页脚总是固定在页引导的底部？
、、、、
我试图创建页脚，这是固定的底部的网页，它将显示只有当我向下滚动到底部。我想这样做，因为现在是最重要的。我添加了一个加载页，页脚在该页上可见。<nav class="navbar navbar-default navbar-bottom" role="navigation">
<d
浏览 4提问于2015-08-03得票数 1
回答已采纳
2回答
背景我尝试创建一个jQuery插件，它可以计算用户是否已经滚动到overflow: scroll;设置的固定div的底部。我的方法是创建包装器div (带有固定位置和溢出:滚动的div )来包装表，我还将另一个div放在表的
浏览 3提问于2014-03-05得票数 2
回答已采纳
1回答
在固定div上滚动div
、、、
我的问题是，如何在不使用背景图像的情况下，将div与固定的div重叠。这是我到目前为止所得到的。我检查了用户是否滚动到div，我希望滚动效果在底部<
浏览 6提问于2022-09-27得票数 -1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
