“View More” button after every three bottom scroll using jquery
Question
I have tried a lot but can't add show more button automatically just after every three scroll down.
When I am going to bottom of my page it scrolls down infinite times. I have to stop it after three scrolls and want to add "view more" button after every three scrolls.
1 answers
solution1
0 2015-10-17 05:02:47
try something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <style> body { width: 200px; height: 100px; overflow: scroll; } </style> </head> <body > <p>Try the scrollbar in div.</p> In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' <p>Try the scrollbar in div.</p> In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' <p>Try the scrollbar in div.</p> In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' <p>Try the scrollbar in div.</p> In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' <p>Scrolled <span id="demo">0</span> times.</p> <script> var lastScrollTop = 0; var x = 0; $(window).scroll(function(event){ var st = $(this).scrollTop(); if (st > lastScrollTop){ document.getElementById("demo").innerHTML = x += 1; if( x%3 == 0){ var i=document.createElement('button'); i.innerHTML="more"; document.getElementsByTagName('body')[0].appendChild(i); } } lastScrollTop = st; }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to Scroll Bottom using Jquery?
RoR - .js View More button (top) to View Less button (bottom)
how to add view more button to bootstrap image gallery using jquery
jQuery: Scroll position becomes locked after scroll to bottom animation
jQuery create load more button with infinite scroll
Jquery read more button in infinite scroll script
Scroll top/bottom of the screen on button click using JavaScript not jQuery also It should work in chrome, IE & mozilla
Scroll to bottom of table using jScrollPane with JQuery
Scroll to bottom of page on click, using JavaScript, NOT JQuery
Scroll to bottom of page using Javascript or jquery with these conditions
Related Tags