Есть ли способ (с CSS3, JS или что-нибудь среднее), чтобы страница начиналась с определенной точки прокрутки вниз?
Я бы хотел, чтобы моя страница загружалась без заголовка, первоначально отображаемого при загрузке (что означает его над фактическим окном просмотра пользователя).
Есть ли простой/простой способ сделать это?
Вы можете использовать стандартный javascript: window.scroll(x, y).
Это должно работать довольно хорошо, учитывая, что вы будете делать это при onload, то есть окно должно начинаться с (0, 0). Играйте с (x, y), пока вы не получите свой заголовок в положение, в котором вы довольны. Естественно, вам нужно будет изменить его в любое время, когда заголовок движется.
Пример:
<body onLoad="window.scroll(0, 150)">
Если у вас есть id, указанный в div, который содержит ваше содержимое после заголовка, вы можете, вероятно, загрузить страницу с таким URL-адресом, http://website.com/page#id.
Это приведет вас к точке, в которой присутствует div.
Вы можете использовать window.scroll(x,y) при загрузке страницы.
Это очень простые трюки для этого:
Создайте класс смещения css и назначьте его телу
.offset{
margin-top:-500px;
}
Таким образом, тело будет загружено смещением 500px сверху
Затем добавьте следующий код в тело
<body class="offset" onLoad="window.scroll(0, 150)">
затем используя jquery, удалите класс смещения, когда страница загружена
$(document).ready(function(){
$(".row").removeClass("offset");
});
Текущие ответы приводят к заметному "прыжку" вниз по странице или требуют, чтобы вы знали точный номер пикселя, который вы хотите перепрыгнуть.
Я хотел найти решение, которое будет проходить мимо контейнера, независимо от размера/содержимого контейнера, и вот что я придумал:
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();
HTML - Именованные якоря
Вы также можете использовать старые добрые якоря. Определите именованный якорь с помощью
<a id="start">any text</a>
Это должно быть определено в точке, которая должна быть видна. Поскольку это можно увидеть даже в нижней части экрана, вам может потребоваться привязать немного ниже, чем требуется. Таким образом мы убедимся, что содержимое сверху, которое не нужно отображать, хорошо скрыто. Как только он будет определен для прокрутки вниз при загрузке страницы, URL-адрес должен начинаться с page.aspx # вместо page.aspx
<a href="#start">access within the same page</a>
<a href="page.aspx#start">access from outside the page</a>
Использовать Javascript window.scroll:
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
$('something').hide();
}
else{
$j('something').show();
}
});
Использование 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>
есть функция в jquery под названием .scroll(). Вы можете использовать эту функцию, чтобы ваш заголовок отображался только тогда, когда пользователь прокручивает сайт.
Это работа для меня.
<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>
Спасибо.
Комбинированное решение
Каждое отдельное JavaScript-первое решение может (и обычно так) приводит к сбоям перед событием pageLoad. Как предположил Удай, лучший способ добиться плавной прокручиваемой нагрузки - использовать отрицательный запас CSS.
Лично я использую фрагмент кода, похожий на фрагмент 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>
Функция короткого самовызова в атрибуте 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);
})()