Bootstrap滚动监听事件activate.bs.scrollspy详解及应用
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Bootstrap滚动监听事件activate.bs.scrollspy详解及应用</title> <link rel='stylesheet' href='bootstrap-3.3.7-dist/bootstrap.css' /> <script type='text/javascript' src='js/jquery-1.11.0.min.js'></script> <script type='text/javascript' src='bootstrap-3.3.7-dist/js/bootstrap.js'></script> <style type='text/css'> body { padding: 10px; } #navbar { top: 50px; right: 10px; position: fixed; width: 200px; background-color: #FFF; } </style> </head> <body> <div id='navbar'> <ul class='nav nav-pills nav-stacked'> <li> <a href='#1'>列表1</a> </li> <li> <a href='#2'>列表2</a> </li> <li class='dropdown'> <a href='#' data-toggle='dropdown'>下拉列表 <b class='caret'></b></a> <ul class='dropdown-menu'> <li> <a href='#3'>列表3</a> </li> <li> <a href='#4'>列表4</a> </li> <li> <a href='#5'>列表5</a> </li> </ul> </li> </ul> </div> <h3 id='1'>列表1</h3> <p><img src='images/1.jpg'></p> <h3 id='2'>列表2</h3> <p><img src='images/2.jpg'></p> <h3 id='3'>列表3</h3> <p><img src='images/3.jpg'></p> <h3 id='4'>列表4</h3> <p><img src='images/4.jpg'></p> <h3 id='5'>列表5</h3> <p><img src='images/5.jpg'></p> <script type='text/javascript'> $(document).ready(function () { //滚动监听插件事件：scrollspy $('body').scrollspy({ target: '#navbar', offset: 50 }) // 点击导航菜单 $('#navbar a').click(function (e) { e.preventDefault() $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 1000) return false; }) }) </script> </body> </html>滚动监听事件'activate.bs.scrollspy'是Bootstrap框架中的一个事件，它在滚动到指定位置时触发。在给body元素绑定scrollspy插件时，可以通过监听该事件来执行一些自定义的操作。
<p>在上面的代码中，通过以下代码给body元素绑定了scrollspy插件，并设置了目标元素为id为'navbar'的导航栏，偏移量为50：</p>
<p>$('body').scrollspy({ target: '#navbar', offset: 50})</p>
<p>在scrollspy插件激活时，会触发'activate.bs.scrollspy'事件。可以通过监听该事件，并添加自定义的操作。例如，在上面的代码中，通过以下代码给导航菜单的链接添加了点击事件，当点击导航菜单时，会以动画的方式滚动到对应的位置：</p>
<p>$('#navbar a').click(function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 1000); return false;});</p>
<p>这段代码使用了'animate'函数来实现平滑滚动的效果，'scrollTop'属性用于设置滚动条的垂直偏移量，'$.attr(this, 'href')'获取了点击链接的'href'属性值，即目标元素的id，并使用'offset().top'获取该元素相对于文档顶部的垂直偏移量。</p>
<p>所以，当点击导航菜单时，会触发该点击事件，页面会以动画的方式滚动到对应的位置。</p>
原文地址: https://www.cveoy.top/t/topic/pd7T 著作权归作者所有。请勿转载和采集!