Javascript onclick页面进入顶部(必须向下滚动至内容)

Javascript onclick页面进入顶部(必须向下滚动至内容),javascript,jquery,Javascript,Jquery,嗨,我有一个页面,有一些javascript事件,基本上我有 手风琴效果在页面中重复数据…在我得到 靠近屏幕底部并展开页面。下一件事我 知道我回到了页面顶部,必须向下滚动 阅读课文。我知道有一种方法可以保持页面的位置, 但是,我将看到什么功能 这是我的JS: $('.accord-btn').on("click", function(){ window.scrollTo(0, 0); }); 现在它将转到首页,但手风琴面板仍然在底部,我想做的是当我点击手风琴面板时,面板将是页面

嗨,我有一个页面,有一些javascript事件,基本上我有 手风琴效果在页面中重复数据…在我得到 靠近屏幕底部并展开页面。下一件事我 知道我回到了页面顶部,必须向下滚动 阅读课文。我知道有一种方法可以保持页面的位置, 但是,我将看到什么功能

这是我的JS:

    $('.accord-btn').on("click", function(){
    window.scrollTo(0, 0);
});

现在它将转到首页,但手风琴面板仍然在底部,我想做的是当我点击手风琴面板时,面板将是页面的顶部,我希望这有帮助。谢谢

单击即可滚动到手风琴

(HTML/CSS仅用于支持演示)

$('.accord btn')。在(“单击”,函数()上){
$(this.get(0.scrollIntoView();
});
.accord btn{
宽度:100px;
高度:100px;
颜色:#fff;
文本对齐:居中;
背景色:#000;
}
.集装箱{
宽度:200px;
高度:200px;
溢出:滚动;
填充顶部:300px;
垫底:300px;
}

内容

我假设您的手风琴场景是一个通用场景,下面是我的建议

<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>

div{display:none;}
p{cursor:pointer;}
$(“p”)。在(“单击”,函数(){
$(this.next('div').toggle();
滚动(0,$(this.offset().top);
});
手风琴触发器

内容块。。。。
或者,您可以使用锚定标记而不是段落作为触发器,为每个段落提供一个id,并将其目标设置为自己的id,从而将页面滚动到该id

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

内容块。。。。

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

你能给我们看一些代码吗?给我们看一下你尝试过的东西你必须在window.scrollTo()中给出目标div坐标,因为0,0反映了屏幕的开始及其行为so@AakashJain,请告诉我你的想法。谢谢你的回复,不幸的是,它在我这边不起作用。是的,它没有滚动。但我明白你的意思。我就是不知道该用什么函数。谢谢。对不起,我弄错了,
.scrollTo()
实际上需要两个参数。然而,vanilla JS实际上有一个
scrollIntoView()
函数也可以工作。我知道,这是一个很好的例子。请尝试使用带6个或更多面板的引导手风琴。谢谢你!很好!我给它添加了动画,但它似乎不起作用。动画是在给滚动事件添加速度吗?如果是这样,您可以尝试使用$('body,html').animate({scrollTop:$(this).offset().top,},700)替换window.scroll行。