Starting a page at a certain scroll point

2020-02-08 05:24发布

站内问答 / JavaScript
780 11 4

Is there a way (with CSS3, JS, or anything in between) to get a page to start at a certain point scrolled down?

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?

11条回答
霸刀☆藐视天下
2楼-- · 2020-02-08 05:57

HTML - Named anchors

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

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

<a href="page.aspx#start">access from outside the page</a>
查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
3楼-- · 2020-02-08 05:58

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.

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
4楼-- · 2020-02-08 06:00

I found @bryanbraun's suggestion very useful. I found that removing the window.scroll produces a nice effect for hiding a nav bar. I've simply added this to the head of my doc:

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

and then added a wrapper around my nav bar and an onscroll trigger rather than an onload:

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

This the nice effect of not causing any interruption to the user, but when they scroll up they see the nav bar :)

It's currently in use here

查看更多
0人赞 添加讨论(0) 举报
混吃等死
5楼-- · 2020-02-08 06:01

These are very simple tricks for that:

  1. Create css offset class and assign to the body

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

    So that body will be loaded with 500px offset from top

  2. Then add following code to the body

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

  3. then using jquery, remove offset class when page is loaded

    $(document).ready(function(){
   $(".row").removeClass("offset");
});
查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
6楼-- · 2020-02-08 06:03

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

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

Working Demo Here

查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
7楼-- · 2020-02-08 06:09

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.

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.

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

(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人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)