Question

编辑（12/26/2012）

我发现以下代码完全符合我的要求，除非现在页面的URL有一个斜杠（例如example.com/page/），页面不会滚动。如果页面的URL以“.php”或“.html”等结尾，则可以正常工作。有关如何使用以下脚本处理URL中的尾部斜杠的任何想法吗？

jQuery('a[href*=#]').bind('click', function(e) {
    // Get the target
    var target = jQuery(this).attr("href"); 

    // prevent the "normal" behaviour which would be a "hard" jump
    e.preventDefault(); 

    // perform animated scrolling by getting top-position of target-
    // element and set it as scroll target
    jQuery('html, body').stop().animate({
        scrollTop: jQuery(target).offset().top 
    }, 500, function() {
        location.hash = target;  //attach the hash (#jumptarget) to the pageurl
    });

    return false;
});

在过去的几年里，我一直在成功使用脚本，但最近遇到了一些问题。基本上脚本的作用是将页面滚动到特定点。链接锚点会发生这种情况。例如，如果一个链接是：

<a href="#anchor">anchor link</a>

页面将顺利地滚动到页面上的那个锚点：

<a name="anchor"></a>

或者：

<a id="anchor"></a>

当页面中使用其他需要链接格式化的其他JS时，会出现问题：

<a href="#">other link</a>

单击此“其他链接”时，页面将平滑滚动，但页面顶部或底部没有锚点。

单击此“其他链接”时会发生什么？应该发生其他JS动作（它确实如此），但不应该出现平滑的页面滚动脚本。

这是我得到这个脚本的一个工作示例：

http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html

这是完整的JS：

Scroller = {
    // control the speed of the scroller.
    // dont change it here directly, please use Scroller.speed=50;
    speed: 10,

    // returns the Y position of the div
    gy: function (d) {
        gy = d.offsetTop
        if (d.offsetParent) while (d = d.offsetParent) gy += d.offsetTop
        return gy
    },

    // returns the current scroll position
    scrollTop: function (){
        body = document.body
        d = document.documentElement

        if (body && body.scrollTop) return body.scrollTop
        if (d && d.scrollTop) return d.scrollTop
        if (window.pageYOffset) return window.pageYOffset

        return 0
    },

    // attach an event for an element
    // (element, type, function)
    add: function(event, body, d) {
        if (event.addEventListener) return event.addEventListener(body, d,false)
        if (event.attachEvent) return event.attachEvent('on'+body, d)
    },

    // kill an event of an element
    end: function(e){
        if (window.event) {
            window.event.cancelBubble = true
            window.event.returnValue = false

            return;
        }

        if (e.preventDefault && e.stopPropagation) {
          e.preventDefault()
          e.stopPropagation()
        }
    },

    // move the scroll bar to the particular div.
    scroll: function(d){
        i = window.innerHeight || document.documentElement.clientHeight;
        h = document.body.scrollHeight;
        a = Scroller.scrollTop()

        if (d>a)
            if(h-d>i)
                a += Math.ceil((d-a)/Scroller.speed)
            else
                a += Math.ceil((d-a-(h-d))/Scroller.speed)
        else
            a = a + (d-a)/Scroller.speed;

        window.scrollTo(0,a)

        if (a==d || Scroller.offsetTop==a)
            clearInterval(Scroller.interval)

        Scroller.offsetTop = a
    },

    // initializer that adds the renderer to the onload function of the window
    init: function(){
        Scroller.add(window,'load', Scroller.render)
    },

    // this method extracts all the anchors and validates then as # and attaches the events.
    render: function(){
        a = document.getElementsByTagName('a');

        Scroller.end(this);

        window.onscroll

        for (i=0;i<a.length;i++) {
            l = a[i];

            if (l.href && l.href.indexOf('#') != -1 && ((l.pathname==location.pathname) || ('/'+l.pathname==location.pathname)) ){
                Scroller.add(l,'click',Scroller.end)

                l.onclick = function(){
                    Scroller.end(this);

                    l = this.hash.substr(1);
                    a = document.getElementsByTagName('a');

                    for (i=0;i<a.length;i++) {
                       if (a[i].name == l){
                            clearInterval(Scroller.interval);

                            Scroller.interval = setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
                        }
                    }
                }
            }
        }
    }
}

// invoke the initializer of the scroller
Scroller.init();

我认为有一种方法可以编写脚本，这样如果href只等于散列标记#而没有散列后的任何文本，那么卷轴将不会触发。

有没有人有更好的想法？

提前致谢！

Answer 1

我无法帮助您使用jQuery函数，但原始脚本有两个简单的解决方案。第一个是一个小修改，告诉脚本忽略锚点的URL 仅哈希标记的特殊情况。

在render函数中，更改行：

if (l.href 
    && l.href.indexOf('#') != -1 
    && (l.pathname == location.pathname
        || '/' + l.pathname == location.pathname)
) {

要：

if (l.href
    && l.href != '#' // <<< Added this conditional >>>
    && l.href.indexOf('#') != -1
    && (l.pathname == location.pathname
        || '/' + l.pathname == location.pathname)
){

这将告诉脚本忽略特殊情况，但不会阻止浏览器对链接做出正常反应，因此浏览器仍然可以跳转到页面顶部。您提到的特殊情况几乎总是在javascript结构中使用，以提供具有href属性的锚标记，因为一些较旧的浏览器会忽略没有标记的标记。 “＃”用作URL以防止链接离开页面。

您可以在链接中使用空的javascript调用，而不是“＃”，如下所示：

<a href="javascript:;">other link</a>

这样可以完全避免卷轴问题。

Answer 2

再次感谢Jarred，感谢您的帮助！我确实遇到过一个可以满足我想要的脚本。这是我找到的更好的脚本：

jQuery('a[href*=#]').bind('click', function(e) {
    e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump
    var target = jQuery(this).attr("href"); //Get the target
    // perform animated scrolling by getting top-position of target-element and set it as scroll target
    jQuery('html, body').stop().animate({ scrollTop: jQuery(target).offset().top }, 1000, function() {
        location.hash = target;  //attach the hash (#jumptarget) to the pageurl
    });
    return false;
});

平滑滚动干扰哈希标记

2 个答案: