web-dev-qa-db-ja.com

特定のスクロールポイントでページを開始する

スクロールダウンした特定のポイントからページを開始する方法はありますか（CSS3、JSなど）。

ロード時に最初に表示されるヘッダーなしでページをロードしたい（つまり、ユーザーの実際のビューポートの上にある）。

これについて簡単で簡単な方法はありますか？

javascripthtmlcsscss3web
22
aroooo

標準のJavaScript： window.scroll(x, y) を使用できます。

onloadでこれを行うことを考えると、これはかなりうまく機能するはずです。つまり、ウィンドウは（0、0）で始まるはずです。 (x, y)ヘッダーを適切な位置に配置するまで。当然、ヘッダーが移動するたびに変更する必要があります。

例：

<body onLoad="window.scroll(0, 150)">
25
pb2q

CSSソリューション

ヘッダーの後にコンテンツを含むidにdivが指定されている場合、おそらくこの種のURLである_http://website.com/page#id_でページをロードできます。

これにより、divが存在するポイントに移動します。

Javascriptソリューション

ページの読み込み時にwindow.scroll(x,y)を使用できます。

16
Aniket

これらは、そのための非常に簡単なトリックです。

  1. CSSオフセットクラスを作成し、ボディに割り当てます

    .offset{
     margin-top:-500px;
    }

    そのため、そのボディは上から500pxのオフセットでロードされます

  2. 次に、次のコードを本文に追加します

    <body class="offset" onLoad="window.scroll(0, 150)">

  3. 次に、jqueryを使用して、ページがロードされたときにオフセットクラスを削除します

    $(document).ready(function(){
   $(".row").removeClass("offset");
});
10
Uday Hiwarale

現在の回答では、ページを目立って「ジャンプ」するか、ジャンプする正確なピクセル数を知る必要があります。

私は、コンテナのサイズ/内容に関係なく、コンテナを飛び越えるソリューションが必要でしたが、私が思いついたのは次のとおりです：

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();

実際のデモはこちら

9
bryanbraun

HTML-名前付きアンカー

古き良きアンカーを利用することもできます。を使用して名前付きアンカーを定義する

     <a id="start">any text</a>

これは、表示する必要があるポイントで定義する必要があります。画面の下部でも表示される可能性があるため、必要以上にアンカーを少し低くする必要がある場合があります。そのようにして、表示する必要のない上部のコンテンツが確実に隠されるようにします。ページが読み込まれたときにスクロールダウンするように定義されたら、URLはpage.aspxではなくpage.aspx＃startになります

<a href="#start">access within the same page</a>

<a href="page.aspx#start">access from outside the page</a>
7
Anuradha Kulkarni

JavaScriptを使用window.scroll：

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 100){ 
    $('something').hide();
  } 
  else{
      $j('something').show();

  }
});​
2
SVS

JavaScript scrollByを使用します。このメソッドが機能するには、ウィンドウのスクロールバーのvisibleプロパティを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>
1
astro boy

.scroll（）というjqueryの関数があります。この関数を使用して、ユーザーがサイトをスクロールしたときにのみヘッダーを表示できます。

0
Jigar Jain

複合ソリューション

JavaScriptファーストのソリューションはすべて、pageLoadイベントの前に一時的に中断する可能性があります（通常はそうなります）。 Udayが示唆したように、シームレスなスクロールロードを実現する最良の方法は、負の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);
    })()
0
Pavel Říha

私にこの仕事。

<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>

ありがとう。

0
Y. Joy Ch. Singha