gpt4 book ai didi

javascript - 单击滚动不适用于固定 div

转载 作者:行者123 更新时间:2023-11-28 02:40:25 26 4
gpt4 key购买 nike

我正在尝试 scrollTop 我的左侧 div,但由于某种原因,它不起作用。

下面是我的 CSS、HTML 和 jquery 代码。我尝试了很多东西但都失败了。现在,如果你能帮我解决这个问题,那就太好了。

$('#leftside').click(function(e) {
$("html, body").animate({
scrollTop: 0
}, 600);
e.preventDefault();
});
html,
body {
height: 100% !important;
}

body {
background-color: #ffffff;
font-weight: 400;
font-size: .79em;
line-height: 1.6em;
font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', sans-serif;
color: #000;
height: auto;
}

#content-wrapper {
position: absolute;
height: 100%;
width: 100%;
overflow-x: hidden;
padding-top: 39px;
box-sizing: border-box;
}

#leftside {
width: 240px;
height: 100%;
float: left;
box-sizing: border-box;
padding-top: 5px;
background-color: #364150;
position: relative;
}

#rightside {
position: fixed;
height: 100%;
width: 100%;
padding-bottom: 50px;
top: 39px;
right: 0;
left: 239px;
background-color: #fff;
}

.right-content {
overflow: auto;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
..... head code
</head>

<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
nav..... code
</nav>

<div id="content-wrapper">

<div id="leftside">
<ul class="page-sidebar-menu">
<li>....</li>
<li>....</li>
</ul>
</div>

<div id="rightside">
<div class="right-content">
Right side content
</div>
</div>

</div>

请你帮我看看为什么上面的方法不起作用或者我做错了什么。

最佳答案

您使用 jQuery,但忘记在准备好的文档中添加您的代码:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
... //your codes come here
});
</script>

如果您不喜欢 jQuery,请将其用作事件处理程序:

document.getElementById("yourid").addEventListener("click", function( event ) ...

关于javascript - 单击滚动不适用于固定 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47210392/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com