Question

我有一个淡出的部分和一个'更多'链接/按钮。打开的部分的其余部分很长，并且链接到外部站点。是否有任何方法可以链接并返回到我的页面仍然显示的部分，因为在我返回页面刷新和用户必须滚动的那一刻，打开'再读'再次滚动以找到以前的位置在页面上不好。如果用户可以返回到页面中的相同位置，并且该部分完全显示，那将是非常好的，至少在他们完成文章或会话之前。有什么想法吗？

以下是代码：

    <html>
      <head>
        <style>
          #fade-wrap {
             position: relative;
             height: 10rem;
             margin-bottom: 3rem;
             overflow: hidden;
           }
          #fade-out {
             position: absolute;
             bottom: 0;
             height: 5rem;
             width: 100%;
           }
        </style>
      </head>
      <body>
        <header>
        </header>
        <section>
          <div>
            <p>
              Some text ...
            </p>
          </div>
          <div id="fade-wrap">
            <p>
              Some text ...
            </p>
            <p>
              Some more text ...
            </p>
          <div id="fade-out"></div>
          </div>
            <p>
              <a id="read-more" 
                 href="javascript:seeMore()">Read More &#8811;</a>
            </p>
         </section>
       <footer>
       </footer>
         <script>
           function seeMore()
            {
              document.getElementById("fade-wrap").style.height = "auto";
              document.getElementById("fade-out").style.display = "none";
              document.getElementById("read-more").style.display = "none";
            }
         </script>
      </body>
    </html>

Answer 1

你必须在url上玩#anchor，以处理当前的页面状态。

<html>
        <head>
            <style>
                #fade-wrap {
                     position: relative;
                     height: 10rem;
                     margin-bottom: 3rem;
                     overflow: hidden;
                 }
                #fade-out {
                     position: absolute;
                     bottom: 0;
                     height: 5rem;
                     width: 100%;
                 }
            </style>
        </head>
        <body>
            <header>
            </header>
            <section>
                <div>
                    <p>
                        Some text ...
                    </p>
                </div>
                <div id="fade-wrap">
                    <p>
                        Some text ...
                    </p>
                    <p>
                        Some more text ...
                    </p>
                <div id="fade-out"></div>
                </div>
                    <p>
                        <a id="read-more" 
                             href="javascript:seeMore()">Read More &#8811;</a>
                    </p>
             </section>
         <footer>
         </footer>
             <script>
                 function seeMore()
                    {
                        document.getElementById("fade-wrap").style.height = "auto";
                        document.getElementById("fade-out").style.display = "none";
                        document.getElementById("read-more").style.display = "none";
                        //Add anchor to keep track readMore is open.
                        window.location.href = "#open";
                    }
                    // if we detect anchor on url
                    if (window.location.href.match(/\#open/i)) 
                    {
                        //Scroll to read-more id
                        document.querySelector('#read-more'). scrollIntoView();
                        //Display items
                        seeMore();
                    }
             </script>
        </body>
    </html>

Answer 2

我建议研究大多数现代浏览器中的localStorage API。您可以使用JavaScript来保存用户最后一次已知的页面“状态”，然后在下次访问时为您提供信息。

例如，您可以设置如下状态：

2018-03-19

然后打电话给：

localStorage.setItem('myUsersPreviousState', 'section_expanded');

...将返回'section_expanded'。

有了这个，你可以说：

var previous_state = localStorage.getItem('myUsersPreviousState');

如何返回到具有“更多”按钮的页面上的相同位置，而无需重新单击“阅读更多”。

2 个答案: