Question

你有一个页面，有一些javascript事件基本上我有带有重复数据的页面中的手风琴效果......直到我得到它才好靠近屏幕底部并展开页面。我接下来的事情知道我回到页面顶部并且必须向下滚动阅读文字。我知道有办法保持页面的位置，但是我会看到什么功能？

这是我的JS：

{{1}}

现在它将进入首页，但Accordion Panel仍然位于底部，我想要做的是当我点击手风琴面板时，面板将成为页面的顶部，我希望这会有所帮助。感谢

Answer 1

要点击滚动到手风琴，

（HTML / CSS仅用于支持演示）

$('.accord-btn').on("click", function(){
    $(this).get(0).scrollIntoView();
});

.accord-btn{
    width:100px;
    height:100px;
    color:#fff;
    text-align:center;
    background-color:#000;
}
.container{
  width:200px;
  height:200px;
  overflow:scroll;
  padding-top:300px;
  padding-bottom:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="accord-btn">content</div>
</div>

.offset()检索元素相对于文档的当前位置。 .top是指距离页面顶部的距离。

Answer 2

我假设您的手风琴场景是一般的，这是我如何去做它

<style>
    div{display: none;}
    p{cursor:pointer;}
</style>

<script>
    $("p").on("click",function(){
        $(this).next('div').toggle();
        window.scroll(0,$(this).offset().top);
    });
</script>

<p>Accordion Trigger</p>
<div>
    Content block....
</div>

或者你可以使用锚标签而不是段落作为触发器，给每个人一个id并将其目标设置为自己的id，这会将页面滚动到该id

<a id="block1" href="#block1">Accordion Trigger</a>
<div>
    Content block....
</div>

或者你可以使用jqueryui的手风琴小部件作为它的直接解决方案。

onclick页面转到顶部（必须向下滚动到内容）

2 个答案: