开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使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的样式进行调整，并根据需要添加其他功能，如动画效果等。

相关搜索:Bootstrap -将Div固定到div的底部使div自动滚动到底部(react)使用CSS使div的内容滚动到底部使用Javascript更改内容后滚动到div底部刷新后滚动到div底部在滚动到div的原始位置时，将div的位置从固定位置切换到最底部，再切换到初始位置如何使<div>可从底部滚动如何使div元素固定到其他div 如何使div向上切换如何使DIV在滚动后伸展到页面底部

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

H5C3第四节

--每一个class为section的div都是一屏,section这个类是固定的--> 我是内容1 我是内容2 我是内容3 我是内容4 //编写js...监听鼠标滚轮事件 */ window.addEventListener("mousewheel", function( e ) { // e.wheelDelta 鼠标滚动的量, 大于0向上滚,...loopTop 滚动到顶部后是否连续滚动到底部，默认false loopBottom 滚动到底部后是否连续滚动到顶部，默认false continuousVertical 是否循环滚动，默认为false...paddingTop/paddingBottom 给每一个section设置一个paddingTop或者paddingBottom,默认值为0，如果需要给页面设置一个固定定位的头部菜单或者底部菜单的时候

5.3K3 0

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

jquery.easings插件 // easing:, // //是否使用css3 transform来实现滚动效果 // css3: false, // //滚动到最顶部后是否连续滚动到底部...// loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true, // //横向slide幻灯片是否循环滚动...、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用 //...jquery.easings插件 // easing:, // //是否使用css3 transform来实现滚动效果 // css3: false, // //滚动到最顶部后是否连续滚动到底部...// loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true, // //横向slide幻灯片是否循环滚动

11.7K3 0

实现滚动时Header自动隐藏

100%; background: #00ff00; position: fixed; top: 50px; } 这里使用绝对定位来将两个header固定在页面顶部...isHidden"> 切换 html, body { margin: 0; padding: 0; }...甚至y值能到负值查看示例这里还有一个问题，只检测了滚动到顶部，而没有检测滚动到底部。这是因为我没想到什么很好的方法去检测。...前者，可以通过判断y值是否为0（或小于0）来实现；而后者，正常来说，滚动到底部时，文档高度-视窗高度应该和滚动条的y值是一致的。...如果有知道如何判断是否滚动到底部的，希望能够和我分享分享 code{background: #f5f2f0;}

2.2K3 0

你也许不知道的浏览器的一些滚动行为

文章涉及到的方法或属性在文末会放链接，方便大家自行查阅！...或者用锚点：盒子出现在顶部效果如下： 3....滚动到底部 window.scrollTo({ left: 0, top: document.scrollingElement.scrollHeight }); // 如果你实在是懒的话......window.scrollTo(0, 999999); 注意：平滑滚动到顶部或者底部自己加参数或者属性即可✅ 3....滚动结束后，强制滚动到指定元素基于上面的例子，我们设置如下属性： ul { scroll-snap-type: x mandatory; li { scroll-snap-align

2.9K2 0

Selenium及python实现滚动操作多种方法

当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。滚动条是无法直接用定位工具来定位的。...js = "var q=document.documentElement.scrollTop=0" return self.driver.execute_script(js) # 滚动到底部...该方法可以将滚动条拖动到需要显示的元素位置，此方法用途比较广方法三：根据页面显示进行变通，发送tab键比如，密码是输入框，正常手工操作时，可以通过tab键会切换到密码框中，所以根据此思路，在...python中也可以发送tab键来切换，使元素显示 from selenium.webdriver.common.keys import Keys driver.find_element_by_id...–scrollWidth 获取对象的滚动宽度 #滚动到底部 js = "window.scrollTo(0,document.body.scrollHeight)" driver.execute_script

5.8K2 1

fullPage.js全屏滚动插件

string)左右滑块的项目导航的位置，可选 top 或 bottom controlArrowColor (string) 左右滑块的箭头的背景颜色 loopBottom (true/false)滚动到最底部后是否滚回顶部...loopTop (true/false)滚动到最顶部后是否滚底部 loopHorizontal (true/false)左右滑块是否循环滑动 autoScrolling (true/false)...CSS3 transforms 滚动 paddingTop string() 与顶部的距离 paddingBottom string() 与底部距离 keyboardScrolling (...setKeyboardScrolling() 添加或删除键盘方向键控制 setScrollingSpeed() 定义以毫秒为单位的滚动速度 6.回调函数 -- -- afterLoad () 滚动到某一屏后的回调函数...afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink

14.8K2 0

06-移动端开发教程-fullpage框架

我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...浏览器能兼容到ie8+及其他现代浏览器。...字符串 bottom 左右滑块的项目导航的位置，可选 top 或 bottom controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部...loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值 true 是否使用插件的滚动方式...afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink

5K5 0

06-移动端开发教程-fullpage框架

我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...浏览器能兼容到ie8+及其他现代浏览器。...字符串 bottom 左右滑块的项目导航的位置，可选 top 或 bottom controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部...loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值 true 是否使用插件的滚动方式...afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink

5.1K9 0

微信小程序示例 - 视图容器

只可放置组件，其他节点会被自动删除属性名称作用 indicator-dots 是否显示面板指示点 autoplay 是否自动切换 current 当前所在页面的 index...interval 自动切换时间间隔 duration 滑动动画时长 bindchange 滑动后的触发事件可滚动视图区域 scroll-view 代码结构属性名称作用 scroll-x、scroll-y 允许横向、纵向滚动 upper-threshold、lower-threshold 距顶部/左边（底部/右边）多少px...事件处理：滚动到顶部/左边 bindscrolltolower 事件处理：滚动到底部/右边 bindscroll 事件处理：滚动视图容器 view 代码结构没有固定结构，比较随意，可以包裹其他组件...，也可以放到一些组件的内部，类似HTML中的 DIV ...

1.1K8 0

控制页面的滚动:自定义下拉到刷新和溢出效果

你可以使用它来取消滚动链接，禁用/自定义拉动到刷新操作，禁用iOS上的橡皮圈效果（当Safari实现超滚动行为时）等等。...）注意:overscroll-behavior还支持overscroll-behavior-x和overscroll-behavior-y的简写，如果您只想定义特定轴的行为让我们深入一些例子来看看如何使用...overscroll-behavior 防止滚动逃离固定位置元素 chatbox聊天场景考虑位于页面底部的固定定位聊天室。...最终的结果是当用户到达聊天记录的顶部/底部时，主页面保持放置状态。在聊天框中开始的滚动不会传播出去 ?...(聊天窗口下的内容也会滚动) 页面重叠场景下面”方案的另一个变动就是是当你看到内容在固定位置叠加后滚动时。一个死的样品overscroll行为是为了！浏览器试图帮助，但它最终使网站看起来越来越多。

3.2K2 0

webAPP页面切换之滑动-swiper2(切换页面默认显示顶部)

最近做一个web页面，希望在手机上能滑动切换页面，第一次这种要求，在网上找到了一个插件swiper,swiper2可以在电脑和手机上使用，于是选择这个插件，在使用这个插件的过程也遇到了很多问题，如滚动条很长...，体验不好，最后采用js来控制高度，在此页面中也采用了bootstrap-table插件来固定表头，采用js动态的设置高度，当页面高度小时，有滚动条，页面高时就完全展示，为了体验好，当滚动到第一个页面底部时...，滑动切换第二个页面的顶部，需要scrollTop实现页面结构 <div class="swiper-pages swiper-container....height() }); $('.swiper-slide').css({ "height": $(window).height() }) //页面中含有echart图表，需要再调用swiper插件后再...init 和setoption图表，否则图表在页面切换时不显示 var myLineChart = echarts.init(document.getElementById('linechart1'),

2.2K2 0

移动端吸顶fixbar解决方案

需求背景经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。...问题 position：fixed给移动端带来的问题： IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现滚动到顶部之后，会出现两个一样的吸顶, 过一会才恢复正常。...footer底部输入框 focus 状态，footer 底部输入框被居中，而不是吸附在软键盘上部。...2、sticky元素的底部，不能和父级底部重叠。...，但是需要对切换过程做一些优化。

2.9K3 0

selenium-java web自动化测试工具

是漏测，而selenium则为项目的测试提供了很大的便利，但并不是所有项目都适合，哪些适合呢：公司自己的产品，且需要经常回归测试，比如类似OA这类业务系统产品不适合的呢：比如外包业务，快速交付后就不管的...By.partialLinkText("通过Dockerfile构建镜像并发布web项目")).click(); 82 83 Thread.sleep(1000); 84 //移动到底部...)"); 91 Thread.sleep(1000); 92 //移动到指定元素，且元素底部和窗口底部对齐参考 https://www.cnblogs.com/testway...[2]/div[2]/div[1]/div/div[1]/div/div/div[2]/div[4]/div[3]/div[1]/a[5]/img"))); 94 //暂停五秒钟后关闭...，注意在一个窗口中完成操作后，确认是否切回到需要操作的窗口　　　　　　　2.页面内部有frame的，除了切换到具体页面外，还要切换到对应的frame中才行　　　　　　　3.关闭窗口时，也要确认操作的对象

2.7K2 0

前端必看的8个HTML+CSS技巧

固定底部内容这种是一个非常常见的布局方式，但是对于新手来说是比较常见的难题。这种布局方式在后台管理系统中比较常见，当我们内容不足浏览器窗口高度时，底部内容需要固定在底部。...虽然说标题是说“固定”底部，但是我们想要的效果不是position: fixed。使用固定定位，在内容高于窗口高度时，就会挡住我们的内容。随着CSS3的来临，最完美的实现方式是使用Flexbox。...首先我们来讲讲div包裹的属性，我们需要给它一个固定的width宽和height高。然后我们必须给予这个元素overflow: hidden属性。让图片放大的时候不会超出这个div元素的宽高。...普通的网页图片会跟随着网页一起滑动，但是视觉差效果图就会固定在底部，只有图片所在的窗口上的元素会移动。仅使用CSS 对你没有看错，这个效果只需要用到CSS就能轻易的实现！...star 一下谢谢 ---- 使用CSS + JavaScript 有些童鞋可能没有被这个震撼到或者还是觉得不够刺激。那我们再来一个高级例子，上面的例子在滑动的时候图片是固定死的。

1.7K6 1

8则未必知道且超级实用的纯CSS布局排版技巧 | 网易4年实践

全屏布局经典的「全屏布局」由顶部、底部和主体三部分组成，其特点为三部分左右满屏拉伸、顶部底部高度固定和主体高度自适应。该布局很常见，也是大部分Web应用主体的主流布局。...在常规实现方式里也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。...第1个：top为0px，滚动到容器顶部就固定第2个：top为40px，滚动到距离容器顶部40px就固定第3个：未声明top/bottom，就一直保持相对定位第4个：...bottom为40px，滚动到距离容器底部40px就固定第5个：bottom为0px，滚动到容器底部就固定当然，换成left或right也一样能实现横向的吸附效果。...由于行内元素在当前行排版产生溢出会自动将其余节点排版到下一行，因此还需声明white-space:nowrap使所有行内元素在一行内排版完毕。若产生滚动条，还需对容器的height做适当的微调。

3.2K2 0

学用Hooks写React组件——基础版移动端无缝轮播图组件

因为最近在做移动端的东西，所以尝试写一个移动端的无缝轮播图，当前版本只支持手势切换和点击切换功能。文章主要包括从简单雏形到最终效果所有的思路和代码。...简单效果图设计思路问：无缝轮播需要解决的问题在于，切换到最后一个轮播图时，如何流畅的到达第一个？答：核心思想是利用视觉上的感觉，在用户无感的情况下切换回去，也就是快速回滚。...，然后瞬间把第一个轮播图又移动到第一个位置。...现在开始处理无缝的问题,主要处理如何循环补位能达到瞬间转换的效果，我这里是使用container.current.style.transitionProperty = ‘none’关闭动画来进行瞬间切换.../div> ) } 到这里无缝轮播就算大功告成。

3.7K2 0

Web前端实现锚点功能的三种方式

window.location.href='#root'; // window.location.hash='#root'; 二、scrollIntoView Element.scrollIntoView 方法会滚动元素的父容器，使元素显示在当前视窗内...默认为 "start"，元素顶部将滚动到视窗顶部；取值 "end"，元素底部将和视窗底部对齐；取值 "center"，元素中线将和视窗中间对齐；取值 "nearest"，元素将就近对齐。...三、scrollTo/scrollBy window.scrollTo 可将视窗滚动到指定的坐标。...#root 元素顶部到与视窗顶部对齐 window.scrollTo(domScrollLeft, domScrollTop + targetOffsetTop); window.scrollBy(domScrollLeft..., targetOffsetTop); 同理，滚动元素到与视窗底部或与视窗中间对齐亦可取参计算。

2.8K3 1

js点击按钮返回页面顶部

2016-08-22 03:08:28 在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮...即给最顶部的div设置一个id，然后a标签的链接地址写成该id，当点击时就会返回顶部，但是缺点为过于突兀，因为是立即返回顶部。...来看一下代码吧：返回顶部上面代码当滚动条滚动到一定位置后出现该a标签，且该a标签的position...值为fixed，始终固定为浏览器的某一特定位置。...点击a标签即会返回到顶部div所在位置再来看第二种方式第二种方式相对来说比较人性化，看起来也比较舒服，直接先来看代码吧落帆亭博客专注web前端开发 <a class

25K1 0

Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

前言我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部这是为了方便用户查看商品的各类信息或提交订单购物也就是吸顶盒效果,那这个效果是怎么实现的...scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 当超过150像素时,把顶部的导航菜单设置固定...id="wrap" class="wrap"> ...总结要想实现一个层始终固定在屏幕的顶部或底部,就不得不使用css的positon样式,其次,在来控制网页是不是需要把导航菜单置顶,因为当网页内容的浏览没有滑出导航菜单的可见范围时,是没有必要把导航菜单置顶的...,因此,在代码中就需要监听网页的滚动跳滑动事件当超过一定的范围以后,才有必要为导航菜单设置固定的position样式其实也有另外一种解决办法,就是导航栏始终是固定在顶部,当拉动滚动条时到一定的范围,

3.3K5 0

【H5】209-可能这些是你想要的H5软键盘兼容方案

当输入框位于页面下部位置时，在 IOS 上，会将 webview 整体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在 Android 则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区...由于上面已经实现监听 IOS 和 Android 键盘弹起和收起，在这里，只需在 Android 键盘弹起后，将焦点元素滚动（scrollIntoView()）到可视区。...在 UC 浏览器上，软键盘弹起后，浏览器上面的标题栏高度就有个高度变小延时动态效果，这样导致 webview 往下滚了一点，底部输入框滚到了非可视区。...所以猜测，其实是滚到底了，软键盘弹起，页面实现高度大于可视区高度，这样只能在软键盘弹起后，强行增加页面高度，使输入框可以显示出来。...了解软键盘弹起页面在 IOS 和 Android 上的表现差异是前提，其次是将焦点元素滚动到可视区，同时要考虑到第三方输入法和某些浏览器上的差别。

3.9K1 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭