重新加载后滚动到位置

时间:2015-12-03 10:34:56

标签: javascript php jquery scroll url-parameters

我不是Javascript,但我认为这很容易实现。

我的页面上有一个设置参数的链接(使用PHP)。该参数用于获取要显示的帖子数量。这就像一个魅力。

但现在我想滚动到用户在页面重新加载参数后点击链接的帖子。因此,用户无需滚动浏览他已经看过的帖子。

以下是步骤:

  1. 用户点击链接以加载更多帖子
  2. 网站重新加载参数(例如domain.com/?numberofposts=10)
  3. 现在,网站应滚动到用户点击链接时的位置
  4. 我试图通过scrollTo等实现这一点,但我无法让它工作。我的想法是将滚动位置作为另一个参数传递?

    有人知道如何解决这个问题吗?谢谢:))

2 个答案:

答案 0 :(得分:1)

通过在帖子或页面中加入锚点标记,您可以在帖子正文中放置链接,点击该链接后,读者可以跳转到页面上的其他位置。

锚标记将包含两个HTML元素。首先,您需要创建链接。

如果要链接到同一页面上的某个位置,则链接的格式类似于:

<div class="profile">
                                             <div class="row" style="background-color:">
                                                 <div class="col-md-4">
                                                     <img src="<?php echo YII::app()->request->baseUrl;?>/img/<?php echo $model->image;?>" class="img-responsive"><br>
                                                 </div>
                                                 <div class="col-md-4">
                                                     <h2 class="profile-name" style="color:white;"><?php echo $model->ngo_name;?></h2>
                                                     <div class="rating">
                                                         <span class="glyphicon glyphicon-star 2x" aria-hidden="true"></span>
                                                         <span class="glyphicon glyphicon-star 2x" aria-hidden="true"></span>
                                                         <span class="glyphicon glyphicon-star 2x" aria-hidden="true"></span>
                                                         <span class="glyphicon glyphicon-star 2x" aria-hidden="true"></span>
                                                         <span class="glyphicon glyphicon-star 2x" aria-hidden="true"></span>
                                                     </div><!--rating ending here-->
                                                     <h3>Owner:</h3>
                                                     <p>Mr. Asad Abdul Jabbar</p>
                                                      <h3>Address:</h3>
                                                     <address>

                                               <p>  <?php echo $model->address;?><br></p>

                                          </address>
                                                      <h3>Requirements:</h3>
                                                      <p>-Volunteers required for refugees settlement in Kashmir<br>-Cash for food and water of refugees<br>-Donations can be transferred via online banking, AC no.<em>12345</em></p>
                                                     <h3>Write Review</h3>
                                                     <textarea type="text" class="form-control" rows="3" cols="4" name="requirements" value=""></textarea><br>
                                                     <button class="btn btn-primary">Share</button>
                                                 </div>
                                                 </div><!--row ending here--><br>


                                          </div><!--profile ending here--><br>

                                          <div class="story-content" style="background-color:white;">
                                             <div class="row">
                                                 <div class="col-md-8 col-md-offset-2 vol-stories">
                                                     <div class="media">
                                        <div class="media-left">
                                            <a href="user-profile.php">
                                                <?php $modelnew=$model->userRateReviewNgos; 
                                                foreach($modelnew as $new)
                                                {
                                               ?>

                                              <img class="media-object" src="<?php echo YII::app()->request->baseUrl;?>/img/<?php echo $new->profile->picture;?>">
                                          </a>
                                       </div>
                                        <div class="media-body"><strong><?php echo $new->user->username; ?></strong>
                                            <p style="color:black;"><?php echo $new->review;?></p>
                                          <?php   }
                                                ?>
                                              </div>
                                                         <button class="btn btn-primary btn-xs">Edit</button>
                                                         <button class="btn btn-primary btn-xs">Delete</button>


                                              </div><!--Media ending here--> 

                                                 </div>
                                             </div><!--row ending here--><hr class="half">

                                           </div>

例如,如果文字是“阅读有关猛禽的更多内容!”然后你的HTML应该是这样的:

<a href="#anchor">Link Text</a>

上述锚点链接仅在您跳转到同一网页上的指定位置时才有效。如果您想要链接跳转到其他页面上的特定位置,则需要将#anchor替换为该页面的完整URL,类似于:

<a href="#raptors">Read more about raptors!</a>

锚标记的第二部分是实际锚。在跳转类似于:

之后,锚点应放在您想要开始阅读的行的开头
<a href="http://examplecom/blog/filename.html#anchor">Link Text</a>

按照上一个示例,锚码将是:

<a name="anchor"></a>

完整教程here

答案 1 :(得分:0)

您需要知道必须滚动到的位置。 所以,是的,您需要将滚动位置存储在某处(或将其作为参数传递)。