Question

我有这个示例代码。

<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>

我的浏览器大小调整为375像素。我希望浏览器能够自动滚动＆＃39;到活动的项目。可能吗？感谢

Answer 1

我已经完成了满足您需求的功能，但您必须使用“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');
});

希望，这会对你有帮助......

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

1 个答案: