js跳转到指定指定元素位置
/** * js跳转到指定指定元素位置 * @param ele 元素 * @param speed 速度 * @param offset 偏移量,优化位置 */ function scrollTo(ele, speed, offset) { speed = speed || 300; offset = offset || 0; if (!ele) { $("html,body").animate({ scrollTop: 0 }, speed); } else { $("html,body").animate({ scrollTop: ($(ele).offset().top - offset) }, speed); } return false; }
完整示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .big { margin: 0 auto; background-color: azure; } .big div { margin-top: 20px; height: 200px; background-color: aquamarine; padding: 20px; font-size: 18px; } .big div:nth-child(odd) { background-color: bisque; } </style> </head> <body> <div class="big"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div id="e">7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div> <div>20</div> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> scrollTo("#e"); /** * js跳转到指定指定元素位置 * @param ele 元素 * @param speed 速度 * @param offset 偏移量,优化位置 */ function scrollTo(ele, speed, offset) { speed = speed || 300; offset = offset || 0; if (!ele) { $("html,body").animate({ scrollTop: 0 }, speed); } else { $("html,body").animate({ scrollTop: ($(ele).offset().top - offset) }, speed); } return false; } </script> </body> </html>