jQuery 定位到某个元素
生活随笔
收集整理的這篇文章主要介紹了
jQuery 定位到某个元素
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
- jQuery 使用scrollTop設置垂直滾動條位置
- animate和scrollTop結合使用，可以使得定位到某個元素時，帶有動畫效果
- Html Element 使用 scrollIntoView
jQuery 定位到某個元素
$('html,body').animate({scrollTop:$('.item:eq(1)').offset().top}, 1000);上述代碼的含義為：定位到第2個（:eq(xxx) 下標從0開始）class 是 item 的元素（該元素的上邊緣停靠在瀏覽器的頂部），且定位過程是1秒的動畫。
示例
<html> <header> <script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){$(".rightFlatBar span:eq(0)").click(function(){$('html,body').scrollTop(0);});$(".rightFlatBar span:eq(1)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(0)').offset().top}, 1000);});$(".rightFlatBar span:eq(2)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(1)').offset().top - 30}, 1000);});$(".rightFlatBar span:eq(3)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(2)').offset().top - 30}, 1000);});$(".rightFlatBar span:eq(4)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(3)').offset().top}, 1000);});$(".rightFlatBar span:eq(5)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(4)').offset().top}, 1000);}); }); </script> <style type="text/css"> *{margin:0;} .item{width: 100%;height: 300px;padding: 100px 0 0 100px; } .item:nth-of-type(even){background: #abc;color: #fff; } .item:nth-of-type(odd){background: #fff;color: #333; } .rightFlatBar {position: fixed;right: 5px;bottom: 0px;width: 60px;height: auto; } .rightFlatBar span{display: block;width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid #ececec;border-radius: 5px;transition: .3s;box-shadow: 0px 0px 3px rgba(0,0,0,0.08);text-align:center;line-height: 60px;background: #fff;cursor:hand; } </style> </header><body><div><div class="item"><h1>條目1</h1></div><div class="item"><h1>條目2</h1></div><div class="item"><h1>條目3</h1></div><div class="item"><h1>條目4</h1></div><div class="item"><h1>條目5</h1></div></div><div class="rightFlatBar"><span>頂部</span><span>條目1</span><span>條目2</span><span>條目3</span><span>條目4</span><span>條目5</span></div> </body> </html>運行效果：
參考
https://blog.csdn.net/qq_40028324/article/details/83145820
https://blog.csdn.net/dongdong9223/article/details/50846678
https://www.runoob.com/jquery/css-scrolltop.html
https://blog.csdn.net/kabuqinuo229891/article/details/38499623
總結
以上是生活随笔為你收集整理的jQuery 定位到某个元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WIKO Hi 畅享 60s 今日开售：
- 下一篇： 消息称一汽大众计划推出独立新能源品牌，预