Question

我正在使用的代码

$(".jumpto3").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class

        $("ul.tabs li.start").addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $("#tab1"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content

        return false;
    });

我在这个页面上也有一个工作的scrollTo函数。所以我的问题是，我可以链接到另一个页面的标签就好了，但是我无法选择一个标签，然后按顺序滚动。

javascript:bookmarkscroll.scrollTo('requirements')

我在想我的＆＃34;返回false＆＃34;搞砸了吗？

这是我的另一个标签的链接，工作正常：

http://www.website.com/advertise/#tab1

这个没有：

http://www.website.com/advertise/#tab1?scrollTo=requirements

我确定我在js代码中遗漏了一些非常简单的东西？

这是scrollTo代码：

//** Scrolling HTML Bookmarks script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com/ (April 11th, 09')
//** Updated Nov 10th, 09'- Fixed anchor jumping issue in IE7

var bookmarkscroll={
    setting: {duration:1000, yoffset:0}, //{duration_of_scroll_milliseconds, offset_from_target_element_to_rest}
    topkeyword: '#top', //keyword used in your anchors and scrollTo() to cause script to scroll page to very top

    scrollTo:function(dest, options, hash){
        var $=jQuery, options=options || {}
        var $dest=(typeof dest=="string" && dest.length>0)? (dest==this.topkeyword? 0 : $('#'+dest)) : (dest)? $(dest) : [] //get element based on id, topkeyword, or dom ref
        if ($dest===0 || $dest.length==1 && (!options.autorun || options.autorun && Math.abs($dest.offset().top+(options.yoffset||this.setting.yoffset)-$(window).scrollTop())>5)){
            this.$body.animate({scrollTop: ($dest===0)? 0 : $dest.offset().top+(options.yoffset||this.setting.yoffset)}, (options.duration||this.setting.duration), function(){
                if ($dest!==0 && hash)
                    location.hash=hash
            })
        }
    },

    urlparamselect:function(){
        var param=window.location.search.match(/scrollto=[\w\-_,]+/i) //search for scrollto=divid
        return (param)? param[0].split('=')[1] : null
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=bookmarkscroll
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            var urlselectid=mainobj.urlparamselect() //get div of page.htm?scrollto=divid
            if (urlselectid) //if id defined
                setTimeout(function(){mainobj.scrollTo(document.getElementById(urlselectid) || $('a[name='+urlselectid+']:eq(0)').get(0), {autorun:true})}, 100)
            $('a[href^="#"]').each(function(){ //loop through links with "#" prefix
                var hashvalue=this.getAttribute('href').match(/#\w+$/i) //filter links at least 1 character following "#" prefix
                hashvalue=(hashvalue)? hashvalue[0].substring(1) : null //strip "#" from hashvalue
                if (this.hash.length>1){ //if hash value is more than just "#"
                    var $bookmark=$('a[name='+this.hash.substr(1)+']:eq(0)')
                    if ($bookmark.length==1 || this.hash==mainobj.topkeyword){ //if HTML anchor with given ID exists or href==topkeyword
                        if ($bookmark.length==1 && !document.all) //non IE, or IE7+
                            $bookmark.html('.').css({position:'absolute', fontSize:1, visibility:'hidden'})
                        $(this).click(function(e){
                            mainobj.scrollTo((this.hash==mainobj.topkeyword)? mainobj.topkeyword : $bookmark.get(0), {}, this.hash)
                            e.preventDefault()
                        })
                    }
                }
            })
        })
    }
}

bookmarkscroll.init()

Answer 1

我不确定您使用的是哪个版本

确实，jQuery.ScrollTo有后代:)

jQuery.LocalScroll：将添加   滚动效果，任何锚点导航。适合滑梯，桌子   内容等。它很小，而且非常容易实现。

jQuery.SerialScroll：它是一个多功能插件，可以为任何类型设置动画   顺序导航（上一个/下一个）。它也很小而且很高   可定制的。

看看他们的库jquery.localscroll-1.2.7.js，你可以看到他们把#param过滤选择器作为滚动跳转的目标。

var URI = location.href.replace(/#.*/,''); // local url without hash

和

function filter(){// is this a link that points to an anchor and passes a possible filter ? href is checked to avoid a bug in FF.
            return !!this.href && !!this.hash && this.href.replace(this.hash,'') == URI && (!settings.filter || $(this).is( settings.filter ));
        };

这是有道理的，因为你在属性href中添加了更多的东西并使它像这样搞乱了

http://www.website.com/advertise/#tab1?scrollTo=requirements

您可以将您的参数分配给锚的其他属性，例如：custom =“requirements”，然后您可以在滚动开始之前完成您的工作

$.localScroll({
        target: '#content', // could be a selector or a jQuery object too.
        queue:true,
        duration:1000,
        hash:true,
        onBefore:function( e, anchor, $target ){
            console.log(e);
            console.log(anchor);
            console.log($target);
            // The 'this' is the settings object, can be modified
        },
        onAfter:function( anchor, settings ){
            // The 'this' contains the scrolled element (#content)
        }
    });

http://jsfiddle.net/bkZLr/4/

jquery选项卡选择然后将scrollTo内容添加为书签

1 个答案: