实现页面滚动定位加动画

hyx 2019-03-04 13:40:47 190次 0

当页面太长加了定位效果后,适当加动画更佳。

如下是一种动画效果,具体例子可以查看本站收藏的网址

jQuery.fn.anchorAnimate = function(settings) {
        settings = jQuery.extend({
            speed : 1100
        }, settings);
        var pre_a='';
        return this.each(function(){
            var caller = this;
            $(caller).click(function (event){
                //当前高亮
                $(pre_a).removeClass("active");
                $(caller).addClass("active");
                pre_a=caller;
                event.preventDefault();
                var locationHref = window.location.href;
                var elementClick = $(caller).attr("href");
                arr=elementClick.split("#");
                var destination = $("#"+arr[1]).offset().top - $('#header').outerHeight();
                $("html,body").stop().animate({ scrollTop: destination}, settings.speed, function(){
                    // Detect if pushState is available
                    if(history.pushState) {
                        history.pushState(null, null, elementClick);
                    }
                });
                return false;
            });
        });
    }
    /*调用*/
    $("#website_left li a").anchorAnimate();



发表评论

注:*为必填

回复 的评论
*
选择
*
*