javascript – 如何捕获div的位置,以便在页面重新加载时我可以拥有该位置

前端之家收集整理的这篇文章主要介绍了javascript – 如何捕获div的位置,以便在页面重新加载时我可以拥有该位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想捕捉滚动捕捉区域的位置,如下图所示

以便在页面重新加载任何其他方案时保持状态.

$(function(){

   setInterval(function(){
      window.location.reload();
   },90000);
  
});
.container{
  width:600px;
  height:300px;
 // background:red;
  overflow-y:auto;
  font-size:18px;
  line-height: 40px;
  padding-left: 14px;
  position: relative;
}

.center-band{
    position: fixed;
    z-index: 40;
    width: 100%;
    height: 70px;
    background: #0000003b;
    top: 50%;
    transform: translate(-50%,-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  Lorem ipsum,dolor sit amet consectetur adipisicing elit. Adipisci sequi omnis officia,tempore nesciunt distinctio in inventore quia voluptate ducimus eius natus ex. Facilis excepturi distinctio sunt placeat deleniti error.
  
  Lorem ipsum dolor,sit amet consectetur adipisicing elit. Earum iste architecto dolores tempora officia vero,repellendus ab voluptas,eveniet dolore,cumque aliquam cum quas facilis aspernatur molestias perferendis eum nesciunt!
  
  
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi fugiat impedit quam,sit,sapiente,provident praesentium beatae non nostrum optio repellendus porro laboriosam quidem ipsa itaque? Voluptatem quam pariatur dolorem.
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Error,quisquam similique distinctio,perferendis accusantium quidem voluptatum architecto nulla ad adipisci provident possimus voluptatem ut animi aliquid quo hic ab. Assumenda?
  
  
  
  
  Lorem ipsum dolor sit amet consectetur,adipisicing elit. Fuga,sit corporis. Vitae facilis nesciunt alias consectetur rem,exercitationem,est possimus,beatae architecto suscipit expedita provident culpa. At eum sequi omnis
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum quaerat numquam ex vero,neque aliquid totam,explicabo error suscipit eius. Earum beatae voluptatum cupiditate iusto SAEpe quidem deserunt magnam?
  
  
  Lorem ipsum dolor,sit amet consectetur adipisicing elit. Commodi possimus excepturi dolores quasi,qui libero quia amet,ab facere quis nulla voluptatem,sunt necessitatibus! Animi voluptates quam minus odio excepturi!
  
  <div class="center-band"></div>
</div>

下面是我的codepen:

https://codepen.io/eabangalore/pen/jeKQwd/

问题:我正在尝试捕捉乐队区域的位置,以便在页面重新加载我的文本将是相同的

请帮助我,提前谢谢

解决方法

使用:

> https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset获得该职位.
> https://developer.mozilla.org/it/docs/Web/API/Window/localStorage保存并追回该职位
> https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo滚动

老迷人的方式

作为文档,最好创建部分和标题的文档结构.每个部分都可能有一个ID.因此,您可以使用锚点创建指向特定页面部分的URL.您也可以使用锚创建内部导航.
查看更多:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

<a href="#my-section-1">My section 1</a>
<a href="#my-section-2">My section 2</a>
<section id="my-section-1">
  <h2>My section 1</h2>
  <p>Lorem ipsum ...<p>
</section>
<section id="my-section-2">
  <h2>My section 2</h2>
  <p>Lorem ipsum ...<p>
</section>
原文链接:https://www.f2er.com/js/155990.html

猜你在找的JavaScript相关文章