我正在尝试对其中一个单页滚动网站进行手动编码。例如:http://titicraig.com/
我不能在这里分享我的确切代码，但总体思路是我试图在第一页的底部放置一个人字形，单击该人字形将向下滚动到第二页。此外，右上角的链接也将向下滚动到各自的页面。
我遇到的问题是如何放置人字形，使其始终位于第一页的底部(折叠上方)，而不管屏幕分辨率如何？另外，无论屏幕分辨率如何，我是否手动为每个页面的CSS设置一个高度作为页面的高度？我不知道该怎么做。
<body>
<section id="first-page">
//content
<span class="chevron-wrapper"></span>
</section>
<section id="second-page">
//content
</section>
<section id="third-page">
//content
</section>
</body>
CSS
body
{
background-color: #FFFFFF;
align: 100%;
}
#first-page
{
/* is this even right? or should I do screen.height instead */
/* or should it be a set pixel value? If so, how will it accommodate different resolutions? */
height: 100%;
}
#second-page
{
height: 100%;
}
#third-page
{
height: 100%;
}
.chevron-wrapper /* Should be at bottom of first page */
{
margin-top: 15%; /* separation from first-page content but I found that doing this percentage-wise gets wider and wider as the page size increases */
text-align: center;
width: 100%;
}
任何有关定位事物的帮助都会很棒。谢谢!
编辑:我发现了 vh，所以我可以将 min-height: 100vh 设置为屏幕高度的 100%，而不管分辨率如何。不过，我仍然需要帮助来定位 V 形。
最佳答案
这是执行此操作的代码!
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 500);
setTimeout(function() {
location.href = target.selector;
}, 501);
setTimeout(closeMenu,510);
return false;
}
}
});
});
});
关于html - 如何定位和计算单页滚动网站中元素的距离？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34369052/