<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title></title> <style> * { padding: 0; margin: 0; } div { height: 400px; border: 2px solid #000; 600px; margin: 0 auto; overflow: hidden; position: relative; } ul { position: absolute; top: 0; left: 0; } li { height: 100px; border: 1px solid red; 600px; list-style: none; } </style> </head> <body> <div> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>666</li> </ul> </div> <script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script> <script> (function ($) { var targetTop = 100; var targetTimer = 2000; function scroll() { var currentTop = Math.abs($("ul").position().top); var duration = (targetTop - currentTop) * targetTimer / targetTop; var li = $("ul").find("li:first"); $("ul").animate({ "top": -targetTop }, duration, "linear", function () { console.log("x") $("ul").append(li).css("top", 0); scroll(); }); } scroll(); $("ul").mouseover(function () { $(this).stop(); }).mouseout(function () { scroll(); }); })(jQuery) </script> </body> </html>