滚动并聚焦到导航栏中的活动链接

scroll and focus to active link in navbar

本文关键字：活动 链接 导航 聚焦 滚动      更新时间：2023-09-26

我有这个示例代码。 

<ul id="navigation"  onLoad="$.scrollTo('.active',800, {easing:'elasout'});">
      <li class="no_border"><a href="Item1.html">Item1</a></li>
      <li><a href="Item2.html">Item2</a></li>
      <li><a href="Item3.html">Item3</a></li>
      <li><a href="Item4.html">Item4</a></li>
      <li><a href="Item5.html">Item5</a></li>
      <li><a href="Item6.html">Item6 </a></li>
      <li><a href="Item7.html">Item7 </a></li>
      <li><a href="Item8.html">Item8 </a></li>
      <li><a href="Item9.html">Item9</a></li>
      <li><a href="Item10.html">Item10</a></li>
      <li><a href="Item11.html">Item11 </a></li>
      <li><a href="Item12.html" class="active">Item12</a></li>
</ul>

我将浏览器的大小调整为 375px。我希望浏览器自动"滚动"到活动项目。可能吗？谢谢

我已经制作了函数来满足你的需要，但你必须为此使用"jQuery"：

核心功能：

(function($){
    $.scrollTo = function(target, speed, style){
        if(typeof target === 'string'){
            var pos = $(target).offset().top;
        }else if(typeof target === 'object'){
            var pos = target.offset().top;
        }
        var userSetting = {
            speed: speed,
            style: style
        }
        var setting = $.extend({
            speed: 300,
            style: 'swing'
        }, userSetting);
        if(typeof pos !== 'undefined'){
            $('html, body').animate({
                scrollTop: pos
            },setting.speed, setting.style);
        }
    }
})(jQuery)

像这样执行功能：

jQuery(document).ready(function($){
    $.scrollTo('.active',800, 'swing');
});

希望，这将对您有所帮助...

相关文章：