32

スクロールダウンした特定のポイントでページを開始する方法はありますか（CSS3、JS、またはその間にあるものを使用）？

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

これを行うための簡単で簡単な方法はありますか？

4

13 に答える 13

32

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

これは、で行うことを考えるとかなりうまくいくはずです。onloadつまり、ウィンドウは（0、0）で始まる必要があります。(x, y)ヘッダーが満足のいく位置になるまで、いろいろと試してみてください。当然、ヘッダーが移動するたびに変更する必要があります。

例：

<body onLoad="window.scroll(0, 150)">
于 2012-06-25T05:36:33.970 に答える
24

HTML/DOMソリューション

ヘッダーの後にコンテンツを含むをid指定した場合は、おそらくこの種類のURLを使用してページをロードできます。divhttp://website.com/page#id

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

Javascriptソリューション

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

于 2012-06-25T05:42:30.070 に答える
12

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

コンテナのサイズや内容に関係なく、コンテナを飛び越えるソリューションが欲しかったのですが、これが私が思いついたものです。

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

ここでの作業デモ

于 2016-02-29T17:14:32.880 に答える
10

これらはそのための非常に単純なトリックです：

  1. cssオフセットクラスを作成し、本体に割り当てます

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

    ボディが上から500pxオフセットでロードされるように

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

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

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

    $(document).ready(function(){
   $(".row").removeClass("offset");
});
于 2014-03-31T14:43:09.590 に答える
7

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>
于 2012-06-25T05:44:56.387 に答える
2

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>
于 2012-06-25T05:43:24.870 に答える
2

Javascriptを使用するwindow.scroll：

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

  }
});​
于 2012-06-25T05:47:18.627 に答える
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>

ありがとう。

于 2018-11-23T18:57:33.907 に答える
0

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

于 2012-06-25T05:29:56.997 に答える
0

組み合わせたソリューション

すべての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);
    })()
于 2019-08-25T13:08:04.553 に答える
0

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

次に、ナビゲーションバーの周りにラッパーを追加し、onloadではなくonscrollトリガーを追加しました。

<body onscroll="restoreSkippedContent()">
  <div class="navBarContainer onScrollHide">
    <nav> .... </nav>
  </div>
  ...
</body>

これは、ユーザーに中断を引き起こさないという素晴らしい効果ですが、上にスクロールすると、ナビゲーションバーが表示されます:)

現在ここで使用されています

于 2019-12-09T17:35:24.730 に答える
0

私は質問で言及されたのとまったく同じ問題を抱えていました：

「読み込み時にヘッダーが最初に表示されない状態でページを読み込みたい」

私はJavascriptの第一人者ではありませんが、他の回答では最終結果に満足できなかったため、これを行うための賢い方法を見つけたと思います。これが私のやり方です：

CSS：

#header {display:none}

JS：

window.onscroll = function() {document.querySelector('#header').style.display = "block"}
window.onload = function () {window.scrollTo({top: 1,behavior: 'smooth'})}

これが私が運営しているウェブサイトのビデオプレビューです。

それは私にとって完璧です。1ピクセル下にスクロールすることは、実際には取引を妨げるものではなく、ほとんど気付くことは不可能であり、上に直接スクロールすることができます。

于 2020-04-11T23:49:20.923 に答える
0 
    function ScroolPositionButtom() {
    var elment = document.querySelector(".right .chat.active-chat");
    elment.scrollTo(0, elment.scrollHeight);
}

これは私にとっての仕事です。この関数は特定のクラスに使用します。

于 2022-01-06T09:25:15.200 に答える