web-dev-qa-db-ger.com

Starten einer Seite an einem bestimmten Bildlaufpunkt

Gibt es eine Möglichkeit (mit CSS3, JS oder irgendetwas dazwischen), dass eine Seite an einem bestimmten Punkt nach unten scrollen kann?

Ich möchte, dass meine Seite geladen wird, ohne dass der Header beim Laden anfänglich angezeigt wird (dh er befindet sich über dem tatsächlichen Ansichtsfenster des Benutzers).

Gibt es eine einfache/einfache Möglichkeit, dies zu tun?

javascripthtmlcsscss3web
21
arooo

Sie können Standard-Javascript verwenden: window.scroll(x, y) .

Dies sollte ziemlich gut funktionieren, wenn man bedenkt, dass Sie dies bei onload tun, d. H. Das Fenster sollte bei (0, 0) beginnen. Spielen Sie mit (x, y) herum, bis Sie die Kopfzeile an die Position bringen, mit der Sie zufrieden sind. Natürlich müssen Sie es jederzeit ändern, wenn sich der Header bewegt.

Beispiel:

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

CSS-Lösung

Wenn Sie eine id einer div zugewiesen haben, die Ihren Inhalt nach dem Header enthält, können Sie die Seite wahrscheinlich mit einer solchen URL, http://website.com/page#id, laden.

Dies bringt Sie zu dem Punkt, an dem das div vorhanden ist.

Javascript-Lösung

Sie können window.scroll(x,y) beim Laden der Seite verwenden.

14
Aniket

Dies sind sehr einfache Tricks dafür:

  1. Erstellen Sie eine CSS-Offset-Klasse und weisen Sie sie dem Körper zu

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

    Dieser Körper wird also mit einem Versatz von 500px von oben geladen

  2. Fügen Sie dann den folgenden Code zum Körper hinzu

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

  3. entfernen Sie anschließend mit Jquery die Offset-Klasse, wenn die Seite geladen wird

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

Die aktuellen Antworten führen zu einem spürbaren "Sprung" auf der Seite oder Sie müssen die genaue Pixelnummer kennen, die Sie springen möchten.

Ich wollte eine Lösung, die an einem Container vorbeigeht, unabhängig von der Größe/dem Inhalt des Containers.

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

Arbeitsdemo hier

7
bryanbraun

HTML - Benannte Anker

Sie können auch gute alte Anker verwenden. Definieren Sie einen benannten Anker mit 

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

Dies sollte an dem Punkt definiert werden, der in Sicht sein muss. Da es auch im unteren Bereich des Bildschirms sichtbar sein kann, müssen Sie den Anker möglicherweise etwas tiefer als erforderlich verankern. Auf diese Weise stellen wir sicher, dass Inhalte, die nicht angezeigt werden müssen, gut ausgeblendet sind .. Wenn das Bild beim Laden der Seite nach unten verschoben wird, sollte die URL page.aspx # start anstelle von page.aspx sein

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

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

Verwenden Sie Javascript window.scroll:

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

  }
});​
2
SVS

Verwendung von Javascript scrollBy. Damit diese Methode funktioniert, muss die visible-Eigenschaft der Bildlaufleiste des Fensters auf true gesetzt sein. Stellen Sie also sicher, dass Ihre Seite lang genug ist, um die vertikale Bildlaufleiste anzuzeigen.

<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

in jquery gibt es eine Funktion namens .scroll () .. Sie können diese Funktion verwenden, um die Kopfzeile nur sichtbar zu machen, wenn der Benutzer die Site scrollt.

0
Jigar Jain

Die kombinierte Lösung

Jede einzelne JavaScript-first-Lösung kann (und wird es normalerweise tun) zu einem Schluckauf vor dem pageLoad-Ereignis führen. Wie Uday vorgeschlagen hat, ist die Verwendung der negativen CSS-Marge der beste Weg, um nahtlos gescrollte Ladevorgänge zu erzielen.

Persönlich verwende ich ein Code-Snippet, das dem von Uday ähnelt, jedoch leicht optimiert ist, damit es in Browsern ohne JavaScript funktioniert und die Scroll-Deklaration nicht wiederholt wird.

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

Die kurze selbstaufrufende Funktion im Attribut onLoad kann wie folgt erweitert werden:

(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

Diese Arbeit für mich.

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

Vielen Dank.

0
Y. Joy Ch. Singha