向下滚动整个浏览器 window
Scroll down whole browser window
我正在制作一个网站,这是我当前的设置:
http://puu.sh/hU5KJ/421b5aa76d.png
我有 2 个主要的 divs,首先粗体显示在全浏览器中 window,单击按钮后,整个 window 向下滚动到第二个div。 div 的字面意思如图所示,下方的 div 不在屏幕上,向下滚动功能是一个简单的 javascript。
我的主要问题是,是否可以通过其他方式完成此操作?这感觉有点不对劲,而且每当我处于较低 div 并调整浏览器的高度 window 时,一切都会变得一团糟。
编辑:
我想要它,这样除了那些按钮(没有箭头键,没有鼠标滚轮,最好没有 pg down/up 按钮)之外,它不可能通过任何其他方式滚动。这可能吗?
HTML 积累:
<div id="wrapper">
<div id = "overall"></div>
<div id = "chat"></div>
</div>
其中 "overall" 是图像上的粗体 div,"chat" 是图像上的粗体。我在这些 div 中放置了很多其他东西,如果你想要完整的代码,我可以 post ,但这主要是关于在这两个之间切换。
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#wrapper {
overflow-y: hidden;
overflow-x: hidden;
}
#overall {
background-color: red;
height: 100%;
width: 100%;
text-align: center;
}
#chat {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
以及滚动的JS函数:
function scrollDown() {
$('html, body').animate({
scrollTop: $("#chat").offset().top
}, 1000);
}
function scrollUp() {
$('html, body').animate({
scrollTop: $("#overall").offset().top
}, 1000);
}
我的知识水平很低,我想你可以看到我现在只了解最基本的东西,所以请解释你的答案。谢谢你的帮助。
密钥正在使用 CSS width:100% & height:100%
属性。这些将确保您的元素的大小始终适合浏览器的完整大小。即使你调整它的大小。
$(document).ready(function() {
$("#scroll-down").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#block2").offset().top + 'px'
}, 'slow');
})
$("#scroll-up").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#block1").offset().top + 'px'
}, 'slow');
});
});
html,
body {
height: 100%;
}
.full-size {
display: block;
width: 100%;
height: 100%;
}
#block1 {
background-color: red;
}
#block2 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper full-size">
<div class="full-size" id="block1">
<a href="#block2" id="scroll-down">scroll down</a>
</div>
<div class="full-size" id="block2">
<a href="#block1" id="scroll-up">scroll up</a>
</div>
</div>
编辑:包含 JS smoothscroll
我正在制作一个网站,这是我当前的设置:
http://puu.sh/hU5KJ/421b5aa76d.png
我有 2 个主要的 divs,首先粗体显示在全浏览器中 window,单击按钮后,整个 window 向下滚动到第二个div。 div 的字面意思如图所示,下方的 div 不在屏幕上,向下滚动功能是一个简单的 javascript。
我的主要问题是,是否可以通过其他方式完成此操作?这感觉有点不对劲,而且每当我处于较低 div 并调整浏览器的高度 window 时,一切都会变得一团糟。
编辑:
我想要它,这样除了那些按钮(没有箭头键,没有鼠标滚轮,最好没有 pg down/up 按钮)之外,它不可能通过任何其他方式滚动。这可能吗?
HTML 积累:
<div id="wrapper">
<div id = "overall"></div>
<div id = "chat"></div>
</div>
其中 "overall" 是图像上的粗体 div,"chat" 是图像上的粗体。我在这些 div 中放置了很多其他东西,如果你想要完整的代码,我可以 post ,但这主要是关于在这两个之间切换。
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#wrapper {
overflow-y: hidden;
overflow-x: hidden;
}
#overall {
background-color: red;
height: 100%;
width: 100%;
text-align: center;
}
#chat {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
以及滚动的JS函数:
function scrollDown() {
$('html, body').animate({
scrollTop: $("#chat").offset().top
}, 1000);
}
function scrollUp() {
$('html, body').animate({
scrollTop: $("#overall").offset().top
}, 1000);
}
我的知识水平很低,我想你可以看到我现在只了解最基本的东西,所以请解释你的答案。谢谢你的帮助。
密钥正在使用 CSS width:100% & height:100%
属性。这些将确保您的元素的大小始终适合浏览器的完整大小。即使你调整它的大小。
$(document).ready(function() {
$("#scroll-down").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#block2").offset().top + 'px'
}, 'slow');
})
$("#scroll-up").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $("#block1").offset().top + 'px'
}, 'slow');
});
});
html,
body {
height: 100%;
}
.full-size {
display: block;
width: 100%;
height: 100%;
}
#block1 {
background-color: red;
}
#block2 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper full-size">
<div class="full-size" id="block1">
<a href="#block2" id="scroll-down">scroll down</a>
</div>
<div class="full-size" id="block2">
<a href="#block1" id="scroll-up">scroll up</a>
</div>
</div>
编辑:包含 JS smoothscroll