Javascript 在某个滚动点开始页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11183873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Starting a page at a certain scroll point
提问by aroooo
Is there a way (with CSS3, JS, or anything in between) to get a page to start at a certain point scrolled down?
有没有办法（使用 CSS3、JS 或介于两者之间的任何东西）让页面从向下滚动的某个点开始？
I'd like for my page to load without the header initially displaying on load (meaning it's above the actual viewport of the user).
我希望我的页面加载时最初不显示标题（意味着它在用户的实际视口上方）。
Is there a simple/easy way to go about this?
有没有简单/容易的方法来解决这个问题？
回答by pb2q
You can use standard javascript: window.scroll(x, y).
您可以使用标准的 javascript: window.scroll(x, y)。
This should work pretty well considering that you'll be doing this at onload, i.e. the window should begin at (0, 0). Play around with (x, y)until you get your header to the position that you're happy with. Naturally you'll need to change it anytime the header moves.
考虑到您将在 处执行此操作，这应该很有效onload，即窗口应从 (0, 0) 开始。一直玩(x, y)直到你的头球达到你满意的位置。当然，您需要在标题移动时随时更改它。
Example:
例子：
<body onLoad="window.scroll(0, 150)">
回答by Aniket
CSS Solution
CSS 解决方案
If you have an idgiven to a divthat contains your content after the header, then you can probably load the page with a URL of this kind, http://website.com/page#id.
如果您有一个包含在标题后面的内容的id给定div，那么您可能可以使用这种 URL 加载页面，http://website.com/page#id.
This will take you to the point where the div is present.
这将带您到 div 所在的位置。
Javascript Solution
Javascript 解决方案
You can use window.scroll(x,y)on page load.
您可以window.scroll(x,y)在页面加载时使用。
回答by Uday Hiwarale
These are very simple tricks for that:
这些是非常简单的技巧：
Create css offset class and assign to the body
.offset{ margin-top:-500px; }So that body will be loaded with 500px offset from top
Then add following code to the body
<body class="offset" onLoad="window.scroll(0, 150)">then using jquery, remove offset class when page is loaded
$(document).ready(function(){ $(".row").removeClass("offset"); });
创建css偏移类并分配给body
.offset{ margin-top:-500px; }这样身体就会从顶部加载 500px 的偏移量
然后将以下代码添加到正文中
<body class="offset" onLoad="window.scroll(0, 150)">然后使用jquery，在页面加载时删除偏移类
$(document).ready(function(){ $(".row").removeClass("offset"); });
回答by bryanbraun
The current answers result in a noticeable "jump" down the page, or require you to know the exact pixel number you want to jump.
当前的答案会导致页面明显“跳转”，或者要求您知道要跳转的确切像素数。
I wanted a solution that jumps past a container, regardless of the size/contents of the container, and here's what I came up with:
我想要一个跳过容器的解决方案，无论容器的大小/内容如何，这就是我想出的：
HTML
HTML
<div class="skip-me">Skip this content</div>
CSS
CSS
// Hide the content initially with display: none.
.skip-me {
display: none;
}
.unhide {
display: block;
}
JS
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();
回答by Anuradha Kulkarni
HTML - Named anchors
HTML - 命名锚点
You can also make use of good old anchors. Define a named anchor using
您还可以使用好的旧锚。定义一个命名锚使用
<a id="start">any text</a>
This should be defined at the point that has to be in view. As it can be in view even at the bottom of the screen, you might have to give anchor a little below than required. That way we will make sure that contents on top that need not be shown are well hidden. Once it is defined to scroll down when the page gets loaded, URL should be page.aspx#start instead of page.aspx
这应该在必须考虑的点上定义。由于即使在屏幕底部也可以看到它，因此您可能必须将锚点设置在比要求低一点的位置。这样我们将确保顶部不需要显示的内容被很好地隐藏。一旦它被定义为在页面加载时向下滚动，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>
回答by SVS
Use Javascript window.scroll:
使用 JavaScript window.scroll：
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
$('something').hide();
}
else{
$j('something').show();
}
});?
回答by astro boy
Using javascript scrollBy. For this method to work, the visible property of the window's scrollbar must be set to true. So make sure you page is long enough for the vertical scrollbar to appear.
使用 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>
回答by Jigar Jain
there is a function in jquery called .scroll().. You can use that function to make your header visible only when user scrolls the site..
jquery 中有一个名为 .scroll() 的函数。您可以使用该函数使您的标题仅在用户滚动站点时可见。
回答by Y. Joy Ch. Singha
This work to me.
这项工作对我来说。
<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>
Thanks.
谢谢。
回答by Pavel ?íha
The Combined Solution
组合解决方案
Every single JavaScript-first solution may (and usually does) lead to a hiccup before the pageLoad event. As Uday suggested, the best way to achieve seamless scrolled load is to employ the negative css margin.
每个 JavaScript 优先解决方案都可能（并且通常会）在 pageLoad 事件之前导致打嗝。正如 Uday 所建议的，实现无缝滚动加载的最佳方法是使用负 css 边距。
Personally, I use a code snippet similar to the one of Uday, however slightly tweaked to make it work in browsers without JavaScript and not to repeat the scroll declaration.
就我个人而言，我使用了一个类似于 Uday 的代码片段，但稍作调整以使其在没有 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>
The short self-calling function in the onLoad attribute can be expanded as follows:
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);
})()
