有没有一种方法（使用CSS3、JS或二者之间的任何东西）可以使页面从特定滚动位置开始？
我希望我的页面在加载时不显示标题（也就是用户实际视口上方）。
有没有简单/易用的方法来实现这一点？
13个回答
34
你可以使用标准的JavaScript：
考虑到你将在
示例：
window.scroll(x, y)。考虑到你将在
onload时执行此操作，即窗口应该从（0,0）开始。尝试调整(x, y)值，直到将标题移动到满意的位置。当然，每当标题移动时，你需要更改这些值。示例：
<body onLoad="window.scroll(0, 150)">
- pb2q
3
在Chrome 80.x版本中，我无法通过onload事件使其正常工作。只有当我将行为分配给用户单击的按钮时才有效。这是安全问题吗？ - posfan12
我已经寻找了很久。感谢您，亲切的先生 / 女士 :) - MatthewSzurkowski
@MatthewSzurkowski很高兴这有所帮助，但请注意，现在可能有更好的方法来完成这个任务，而不是像我在答案中提供的示例那样依赖于潜在的硬编码像素值。这取决于您的需求，但是a）如果您正在使用特定的现代前端框架，则该框架可能有更好的方法来完成此操作；b）无论如何，我建议使用已知DOM元素（页面上的其他内容）的位置相对于您要显示的内容，而不是硬编码像素值。 - pb2q
24
HTML/DOM 解决方案
如果您给包含在头部之后的内容的 div 元素设置了一个 id，那么您可以通过此类URL加载页面：http://website.com/page#id。
这将带您到 div 元素所在的位置。
Javascript 解决方案
您可以在页面加载时使用 window.scroll(x,y)。
- Aniket
4
这帮了我不少，谢谢！ - jimmyplaysdrums
4您的第一个解决方案是基于HTML或DOM，与CSS无关。 - David
1@David 接受的答案是一个 JS 解决方案，问题没有指定 CSS 的唯一解决方案。 - Aniket
5你误解了。也许我应该只是编辑你的答案，但我所做的只是批评你给第一个解决方案指定的标题，而不是解决方案本身。你将其命名为“CSS Solution”，但它应该被命名为“HTML Solution”或“HTML/DOM Solution”，因为它并不涉及 CSS。使用 id 意味着它使用 DOM，但你不必使用与 id 相关联的样式才能使其起作用。 - David
13
目前的答案会导致页面出现明显的“跳跃”，或需要你知道要跳转的像素数。
我希望有一种解决方案，可以跳过容器，而不管容器的大小/内容是什么，以下是我的解决方案:
HTML
<div class="skip-me">Skip this content</div>
// Hide the content initially with display: none.
.skip-me {
display: none;
}
.unhide {
display: block;
}
JavaScript
// Unhide the content and jump to the right place on the page at the same time
function restoreAndSkipContent() {
var hidden = document.querySelector('.skip-me');
hidden.classList.add('unhide');
window.scroll(0, hidden.offsetHeight);
};
restoreAndSkipContent();
- bryanbraun
3
我发现这段代码非常有用，谢谢你的分享！但为什么在移动端（Safari/Chrome）上无法运行呢？@bryanbraun - user10202925
看起来iOS可能需要类似于setTimeout的东西来运行将滚动指令推到堆栈顶部。请参见https://stackoverflow.com/a/19929617/1154642和https://hackernoon.com/understanding-js-the-event-loop-959beae3ac40。 - bryanbraun
尝试过了，但不起作用，滚动条仍停留在页面顶部 @bryanbraun - user10202925
11
以下是这方面非常简单的技巧：
创建CSS偏移类并将其分配给body
.offset{
margin-top:-500px;
}
那么页面主体将会从顶部往下偏移500像素
接着将以下代码添加到页面主体中
<body class="offset" onLoad="window.scroll(0, 150)">
$(document).ready(function(){
$(".row").removeClass("offset");
});
- Uday Hiwarale
3
这个方案比其他的都要好！用户使用这个解决方案时根本不会注意到滚动条，而使用
<body onLoad="window.scroll(0, 150)">时，页面在加载完成后会自动滚动，这对用户来说非常烦人。 - Alberto Fontana1尽管
offset类应该只在JS中首次添加 - 否则，当JS不可用时，margin-top：-500px将保持原样，并使前500个像素的内容无法通过滚动到达...（并且对于滚动，使用vanilla JS和“老派”的事件处理，但然后使用jQuery删除类也没有太多意义 - 为什么不以相同的方式处理两者？） - CBroe@CBroe 我想我尝试过了，但对我没有用。
当JS不可用时，margin-top：-500px将保持原样，并使前500个像素的内容无法通过滚动到达，这就是事实。请参见500px个人资料页面作为例子。 - Uday Hiwarale7
HTML - 命名锚点
你也可以使用传统的锚点。使用以下语法定义一个命名锚点：
<a id="start">any text</a>
这应该在需要显示的地方定义。即使它可以出现在屏幕底部，您可能必须将锚点放置在稍低的位置。这样，我们就能确保顶部不必显示的内容被很好地隐藏。 一旦定义了页面加载时向下滚动，URL 应为 page.aspx#start 而不是 page.aspx。
<a href="#start">access within the same page</a>
<a href="page.aspx#start">access from outside the page</a>
- Anuradha Kulkarni
2
使用javascript的scrollBy方法。要使此方法生效，窗口滚动条的可见属性必须设置为true。因此，请确保您的页面足够长，以便垂直滚动条出现。
<html>
<head>
</head>
<body onLoad="window.scrollBy(0,100)">
<div style="height:300px;"> Some text </div>
<div style="height:900px;"> Some text 2 </div>
</body>
</html>
- astro boy
2
使用 JavaScript window.scroll：
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
$('something').hide();
}
else{
$j('something').show();
}
});
- SVS
1
这对我来说是个工作。
感谢。
<div class="demo">
<h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('html, body').animate({
scrollTop: $('.demo').offset().top
}, 'slow');
});
</script>
感谢。
- Y. Joy Ch. Singha
0
在jQuery中有一个叫做.scroll()的函数。你可以使用该函数来使用户滚动网站时仅显示标题栏。
- Jigar Jain
0
function ScroolPositionButtom() {
var elment = document.querySelector(".right .chat.active-chat");
elment.scrollTo(0, elment.scrollHeight);
}
这对我来说是工作。 我使用此函数针对特定类。
- Redoy Kumar Das
1
如果您能在您的答案中添加一些解释，那么它会大大提高质量。 - Lajos Arpad
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接