在某个滚动点开始页面
Posted
技术标签:
【中文标题】在某个滚动点开始页面【英文标题】：Starting a page at a certain scroll point 【发布时间】：2012-06-26 09:16:00 【问题描述】：有没有办法（使用 CSS3、JS 或介于两者之间的任何东西）让页面从向下滚动的某个点开始？
我希望我的页面在加载时最初不显示标题（这意味着它在用户的实际视口之上）。
有没有简单/容易的方法来解决这个问题？
【问题讨论】：
【参考方案1】：jquery 中有一个名为 .scroll() 的函数。您可以使用该函数使您的标题仅在用户滚动站点时可见..
【讨论】：
【参考方案2】：您可以使用标准 javascript：window.scroll(x, y)。
考虑到您将在onload 执行此操作，这应该工作得很好，即窗口应该从 (0, 0) 开始。玩弄(x, y)，直到你把标题放到你满意的位置。当然，您需要在标题移动时随时更改它。
例子：
<body onLoad="window.scroll(0, 150)">
【讨论】：
在 Chrome 版本 80.x 中，我无法让它与 onload 事件一起使用。它仅在我将行为分配给用户单击的按钮时才有效。是安全问题吗？ 我一直在寻找。谢谢好心的先生/女士:) @MatthewSzurkowski 很高兴这有帮助，但请注意，如今可能有更好的方法来做到这一点，而不是像我的回答中的示例那样依赖潜在的硬编码像素值。这取决于您的需求，但是 a) 如果您使用特定的现代前端框架，该框架可能有更好的方法来做到这一点； b) 在任何情况下，我都建议使用已知 DOM 元素（页面上的其他内容）相对于您要显示的内容的位置，而不是硬编码的像素值。【参考方案3】：html/DOM 解决方案
如果您将id 分配给div，并在标题之后包含您的内容，那么您可能可以使用http://website.com/page#id 这种类型的URL 加载页面。
这会将您带到 div 所在的位置。
Javascript 解决方案
您可以在页面加载时使用window.scroll(x,y)。
【讨论】：
这帮助了我。谢谢！ 您的第一个解决方案是 HTML 或 DOM 解决方案。它与 CSS 无关。 @David 接受的答案是 JS 解决方案，并且问题没有为此指定仅 CSS 的解决方案。 你误会了。也许我应该编辑你的答案，但我所做的只是批评你给第一个解决方案的标题——而不是解决方案本身。您将其命名为“CSS 解决方案”，但它应该命名为“HTML 解决方案”或“HTML/DOM 解决方案”，因为它不涉及 CSS。它使用 id 的事实意味着它使用 DOM，但您不必具有与 id 关联的样式才能使其工作。【参考方案4】：使用 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>
【讨论】：
【参考方案5】：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>
【讨论】：
【参考方案6】：使用Javascriptwindow.scroll:
$(window).scroll(function()
if ($(this).scrollTop() > 100)
$('something').hide();
else
$j('something').show();
);
【讨论】：
【参考方案7】：这些都是非常简单的技巧：
创建css偏移类并分配给body
.offset
margin-top:-500px;
因此，body 将加载 500px 偏移距顶部
然后在正文中添加以下代码
<body class="offset" onLoad="window.scroll(0, 150)">
然后使用jquery，在页面加载时移除offset类
$(document).ready(function()
$(".row").removeClass("offset");
);
【讨论】：
这比其他的效果更好！使用此解决方案用户根本不会注意到滚动，而使用<body onLoad="window.scroll(0, 150)"> 时页面会在加载完成时滚动，这对用户来说很烦人。
虽然 offset 类可能只应该首先通过 JS 添加 - 否则，当 JS 不可用时，margin-top:-500px 将保持原位并生成前 500 像素的内容无法通过滚动...（并且使用 vanilla JS 和“老派”事件处理进行滚动，但是用于类删除的 jQuery 也不是最有意义的 - 为什么不采用相同的方式？）
@CBroe 我想我试过了，但对我没用。 when JS is not available the margin-top:-500px will stay in place and will make the first 500 pixels of content unreachable by scrolling，就是这样。例如，参见 500px 配置文件。【参考方案8】：
当前答案会导致页面明显“跳转”，或者要求您知道要跳转的确切像素数。
我想要一个跳过容器的解决方案，无论容器的大小/内容如何，这就是我想出的：
HTML
<div class="skip-me">Skip this content</div>
CSS
// Hide the content initially with display: none.
.skip-me
display: none;
.unhide
display: block;
JS
// 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();
Working Demo Here
【讨论】：
我发现这段代码非常有用，谢谢分享！为什么它在移动设备（Safari/Crome）上不起作用？ @bryanbraun 看起来 ios 可能需要 setTimeout 之类的东西才能将滚动指令运行到堆栈顶部。见***.com/a/19929617/1154642 和hackernoon.com/understanding-js-the-event-loop-959beae3ac40 试过了，没用，滚动仍然在页面顶部@bryanbraun【参考方案9】：这对我有用。
<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>
谢谢。
【讨论】：
【参考方案10】：综合解决方案
每个单一的 JavaScript 优先解决方案都可能（并且通常确实）在 pageLoad 事件之前导致打嗝。正如 Uday 所建议的，实现无缝滚动加载的最佳方法是使用负 CSS 边距。
就我个人而言，我使用类似于 Uday 的代码 sn-p，但稍作调整以使其在没有 JavaScript 的浏览器中也能工作，并且不会重复滚动声明。
<!doctype html>
<html>
<head>
<style>
/* Can be in an external stylesheet as well */
/* This is the ONLY place where you will specify the scroll offset */
BODY.initialoffset margin-top: -100px; /* Or whatever scroll value you need */
</style>
<noscript>
<!-- Browsers without JavaScript should ignore all this margin/scroll trickery -->
<style>
BODY.initialoffset margin-top: initial; /* Or 0, if you wish */
</style>
</noscript>
</head>
<body onLoad = "(function()var B=document.getElementsByTagName('body')[0],S=B.currentStyle||window.getComputedStyle(B),Y=parseInt(S.marginTop);B.className=B.className.replace(/\binitialoffset\b/g,'');window.scroll(0,-Y);)()">
</body>
</html>
onLoad属性中的短自调用函数可以展开如下：
(function()
/* Read the marginTop property of the BODY element */
var body=document.getElementsByTagName('body')[0],
style=body.currentStyle||window.getComputedStyle(body),
offsetY=parseInt(style.marginTop);
/* Remove the initialoffset class from the BODY. (This is the ugly, but everywhere-working alternative)... */
body.className=body.className.replace(/\binitialoffset\b/gi,'');
/* ...and replace it with the actual scroll */
window.scroll(0, -offsetY);
)()
【讨论】：
【参考方案11】：我发现@bryanbraun 的建议非常有用。我发现删除 window.scroll 对隐藏导航栏产生了很好的效果。我只是将它添加到我的文档的头部：
<script>
function restoreSkippedContent()
var hidden = document.querySelector('.onScrollHide');
hidden.classList.add('unhide');
// window.scroll(0, hidden.offsetHeight);
;
</script>
<style>
.onScrollHide
display: none;
.unhide
display: unset !important;
</style>
然后在我的导航栏周围添加一个包装器和一个 onscroll 触发器而不是 onload：
<body onscroll="restoreSkippedContent()">
<div class="navBarContainer onScrollHide">
<nav> .... </nav>
</div>
...
</body>
这是不会对用户造成任何干扰的好效果，但是当他们向上滚动时，他们会看到导航栏:)
目前正在使用中here
【讨论】：
【参考方案12】：我遇到了问题中提到的完全相同的问题：
“我希望我的页面在加载时不显示标题”
我不是 Javascript 专家，但我认为我找到了一种聪明的方法，因为其他答案对最终结果并不满意。这是我的方式：
CSS：
#header display:none
JS：
window.onscroll = function() document.querySelector('#header').style.display = "block"
window.onload = function () window.scrollTo(top: 1,behavior: 'smooth')
这是我运行的网站上的video preview。
这对我来说很完美。向下滚动 1 像素真的不是一个交易破坏者恕我直言，几乎不可能注意到，并且允许能够直接滚动顶部。
【讨论】：
【参考方案13】： function ScroolPositionButtom()
var elment = document.querySelector(".right .chat.active-chat");
elment.scrollTo(0, elment.scrollHeight);
这对我有用。 我将此函数用于特定的类。
【讨论】：
如果你能在你的答案中添加一个解释，那么它会改进很多。以上是关于在某个滚动点开始页面的主要内容，如果未能解决你的问题，请参考以下文章