修复了元素动画滚动主体在顶部

Fixed element animation scrolls body at top

本文关键字：主体 顶部 滚动 动画 元素      更新时间：2023-09-26

我再次发布了这个，但我想我对我的问题还不够清楚。

我有一个"隐藏"的固定元素，我想在单击它时从侧面打开它。

风格：

<style>
#fixed {
    position: fixed;
    width: 200px;
    top: 120px;
    left: -200px;
    height: 200px;
    z-index: 5;
}
.leftc {
    left: 0 !important;
}
</style>

目录：

<div id="fixed">
<div id="fixedbtn"><a href=#>btn</a></div>
</div>

Jquery：

<script>
$("#fixedbtn a").click(function(e) {
  $('#fixed').toggleClass('leftc');
})
</script>

所以，我的问题是当我单击按钮时，正文会滚动回顶部！我不知道为什么会这样。我尝试使用此代码：

var windowPos = $(window).scrollTop();
$('body, html').animate({scrollTop: windowPos}, "fast");

。但我可以看到滚动条在顶部移动并回到正确的位置。我尝试删除"快速"，但没有运气。

帮助！我真的希望有人也解释为什么会发生这种情况;我什么都试过了！

它将正文滚动回顶部的原因是因为您的 href 标签，

<a href="#">btn</a>

"#"是一个锚点。示例：如果我将标签的 href 设置为"#myDiv"，它将滚动到 ID 为"myDiv"的div。由于您只输入了"#"，因此它只会滚动到顶部。

编辑

如果你真的想让你是一个无处可去的标签，你可以试试这个

<a href="JavaScript:void()">btn</a>

这是你想要实现的吗？

下面是一个JSFiddle示例供您查看： 点击这里

.HTML：

<div class="fixed"></div>
<a href="Javascript:void()" class="fixedbutton">Button</a>

.CSS：

.fixed {
    position: fixed;
    width: 0px;
    top: 120px;
    left: -10px;
    height: 200px;
    z-index: 1;
    border: 5px solid #ccc;
    background-image: url("http://www.cinemablend.com/images/news_img/7768/_7768.jpg");
    background-position: center;
    background-size: cover;
}
.fixedbutton {
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color:#ededed;
    text-indent:0;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:"Courier",sans-serif;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:50px;
    line-height:50px;
    width:100px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ffffff;
}
.fixedbutton:hover {
    background-color:#dfdfdf;
}
.fixedbutton:active {
    position:relative;
    top:1px;
}

j查询：

$('.fixedbutton').toggle(function() {
    $('.fixed').stop().animate({
        width: "200px",
}, function() {
    $('.fixed').stop().animate({
        width: "-10px",      
    }, 1000);

}）;

我调整了您从单击切换到事件中的功能。 希望这就是你要找的。

相关文章：