Question

我有一个生成wp文档的php文件。当它加载时我希望它向下滚动到底部或div。这是我使用的代码，但它似乎不起作用。

<?php echo "<script type='text/javascript'>
    $(window).load(function() {
        $("html, body").animate({ scrollTop: $('#cuar_reply_0').offset().top }, 1000);
    });
    </script>";
?>

Answer 1

使用正确的quotes。将$("html, body")更改为$('html, body')：

<?php echo "<script type='text/javascript'>
$(window).load(function() {
$('html, body').animate({ scrollTop: $('#cuar_reply_0').offset().top }, 1000);
 });
</script>"; ?>

如果你加载了jQuery库并且你的元素存在，它应该是这样的：

＆＃13;

$(window).load(function() {
  $("html, body").animate({
    scrollTop: $('#cuar_reply_0').offset().top
  }, 1000);
});

＆＃13;

div {
  background: #adadad;
  height: 600px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<p id='cuar_reply_0'>element</p>

＆＃13;

Answer 2

滚动JQuery加载更多

$(function($) {
    $('#mydiv').on('scroll', function() {
      
        if($(this).scrollTop() +          
                       $(this).innerHeight() 
                   >=  $(this)[0].scrollHeight)
         {
             alert('bottom reached ...');
             //add your ajax for load more..
         }
     })
  }
);

#mydiv{width:150px;height:150px;overflow:auto;overflow-x: hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="mydiv">
Dividing the Panchatantra into individual stories</br> takes off the essence of the colourful fables. Despite this fact, Panchatantra stories have spread all over the world </br> for centuries, especially as bedtime stories for kids. We present here, a list of our versions of 60 such</br>  popular short stories from the Panchatantra, in English. The short</br>  stories include pictures and moral messages, </br> especially for kids. 

</div>

在php文件中向下滚动页面加载

2 个答案:

滚动JQuery加载更多