jQuery js指令碼控制頁面滾動到指定dom位置
阿新 • • 發佈：2018-12-30
歡迎來到Altaba的部落格 2017年11月2日
近期在優化一個互動體驗，當早頂端點選按鈕多下列表某項資料（列表很長，出現滾動條）進行操作，操作完頁面自動滾動到剛剛操作項位置，運用jQuery完美實現
下面是demo原始碼，歡迎有需要的人蔘考使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> <style> .box{ height: 100px; width: 300px; border-radius: 10px; margin: 0 auto 50px; line-height: 100px; text-align: center; font-size: 30px; } .box1:nth-child(1){ background-color: red; } .box2{ background-color: orange; } .box3{ background-color: yellow; } .box4{ background-color: green; } .box5{ background-color: blue; } .box6{ background-color: indigo; } .box7{ background-color: purple; } .box8{ background-color: cyan; } .box9{ background-color: magenta; } .box10{ background-color: pink; } </style> </head> <body> <button class="btn btn-primary" name=".box1">點我定位到位置1</button> <button class="btn btn-primary" name=".box2">點我定位到位置2</button> <button class="btn btn-primary" name=".box3">點我定位到位置3</button> <button class="btn btn-primary" name=".box4">點我定位到位置4</button> <button class="btn btn-primary" name=".box5">點我定位到位置5</button> <button class="btn btn-primary" name=".box6">點我定位到位置6</button> <button class="btn btn-primary" name=".box7">點我定位到位置7</button> <button class="btn btn-primary" name=".box8">點我定位到位置8</button> <button class="btn btn-primary" name=".box9">點我定位到位置9</button> <button class="btn btn-primary" name=".box10">點我定位到位置10</button> <div class="container"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> <div class="box box5">5</div> <div class="box box6">6</div> <div class="box box7">7</div> <div class="box box8">8</div> <div class="box box9">9</div> <div class="box box10">10</div> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $('button').click(function () { var gg = $(this).attr('name'); var scroll_offset = $(gg).offset(); //得到box這個div層的offset，包含兩個值，top和left $("body,html").animate({ scrollTop:scroll_offset.top //讓body的scrollTop等於pos的top，就實現了滾動 }) }) </script> </body> </html>
