Javascript 使用jquery的内容滑块
我正在尝试使用jquery实现一个内容滑块。我有一个div,它有很多文本和一些部分。我们可以向下滚动查看文本。看起来像这样。现在,当用户单击其中一个跳转选项时,应将用户带到该部分(例如,如果用户单击合作,则应将其带到合作),如果用户向下滚动文本,则应在跳转选项中突出显示处于焦点的部分Javascript 使用jquery的内容滑块,javascript,jquery,Javascript,Jquery,我正在尝试使用jquery实现一个内容滑块。我有一个div,它有很多文本和一些部分。我们可以向下滚动查看文本。看起来像这样。现在,当用户单击其中一个跳转选项时,应将用户带到该部分(例如,如果用户单击合作,则应将其带到合作),如果用户向下滚动文本,则应在跳转选项中突出显示处于焦点的部分 如何实现它?这里的好解决方案可能是- 使用jQuery进行轻量级、跨浏览器和高度自定义的动画滚动 index.html <!-- Include jQuery from somewhere, must use
如何实现它?这里的好解决方案可能是- 使用jQuery进行轻量级、跨浏览器和高度自定义的动画滚动 index.html
<!-- Include jQuery from somewhere, must use version 1.8 or above -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include latest jquery.scrollTo, currently 2.1.0, can download from https://github.com/flesler/jquery.scrollTo/releases -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
<!-- Initialize the plugin, the contents of the script can be inlined here, of course -->
<script type="text/javascript" src="js/init.js"></script>
您可以找到gistbootstrap有一个类似的实现。如果我们只是向下滚动,而不是单击链接向下滚动,这会突出显示焦点选项吗
// You can avoid the document.ready if you put the script at the bottom of the page
$(document).ready(function() {
// Bind to the click of all links with a #hash in the href
$('a[href^="#"]').click(function(e) {
// Prevent the jump and the #hash from appearing on the address bar
e.preventDefault();
// Scroll the window, stop any previous animation, stop on user manual scroll
// Check https://github.com/flesler/jquery.scrollTo for more customizability
$(window).stop(true).scrollTo(this.hash, {duration:1000, interrupt:true});
});
});