Javascript 顶部固定导航栏中的链接没有响应

我正在为我的单个页面使用一个小小的Javascript导航栏。我所有的文本链接都可以正常工作，但右侧的出站社交媒体链接没有响应（除非您再次单击并从那里打开）。现在，我对JQuery和Javascript几乎一无所知……我可以理解它以及它是如何工作的，但当遇到错误时，我无法理解它。谢谢你的帮助！：）

这是我的CSS:

.single-page-nav {
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, .9);
    padding: 1.25em 0;
    box-shadow: 0px 2px 8px #555;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index:100000;
}

.single-page-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    margin-left: -30px;
    width: 80%;
    overflow: hidden;
}

.single-page-nav li {
    float: left;
    width: 16%;
    text-align: center;
}

.single-page-nav a {
    display: block;
    color: #000;
    font-family: 'Calibri', Helvetica, Sans-Serif;
    text-decoration: none;            
    font-size: 18px;
    font-weight: bold;
    line-height:1.5em;
}

.single-page-nav a:hover, 
.single-page-nav .current {
    color: #F92F2C;
}

这是我的HTML

<nav id="menu" role="navigation">
    <div class="single-page-nav">
        <ul>
            <li><a href="#header">Page Top</a></li>
            <li><a href="#videohead">Watch the Video</a></li>
            <li><a href="#kickhead">Kickstarter</a></li>
            <li><a href="#abouthead">About the Project</a></li>
            <li><a href="#meethead">Meet the Team</a></li>
            <li><a href="#whathead">What Are We Doing?</a></li>
        </ul>

        <span id="socialtop1">
            <a href="mailto:divya@thedivyaproject.com"><img src="/wp-content/images/emailg.png" alt="Email" /></a>
        </span>

        <span id="socialtop2">
            <a href="http://www.youtube.com/channel/UC94WMtUbVWAzXJIAxAw_cMg"><img src="/wp-content/images/ytg.png" alt="YouTube" /></a>
        </span>

        <span id="socialtop3">
            <a href="http://www.vimeo.com/thedivyaproject"><img src="/wp-content/images/vmg.png" alt="Vimeo" /></a>
        </span>

        <span id="socialtop4">
            <a href="http://www.instagram.com/thedivyaproject"><img src="/wp-content/images/instag.png" alt="Instagram" /></a>
        </span> 

        <span id="socialtop5">
            <a href="http://www.twitter.com/thedivyaproject"><img src="/wp-content/images/twg.png" alt="Twitter" /></a>
        </span> 

        <span id="socialtop6">
            <a href="http://www.facebook.com/thedivyaproject"><img src="/wp-content/images/fbg.png" alt="Facebook" /></a>
        </span>

    </div>
</nav>

最后但并非最不重要的一点是JQuery/Javascript。大部分不是我写的，而是我用过的教程。

// Utility
if (typeof Object.create !== 'function') {
Object.create = function(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
};
}

(function($, window, document, undefined) {
"use strict";

var SinglePageNav = {

    init: function(options, container) {

        this.options = $.extend({}, $.fn.singlePageNav.defaults, options);

        this.container = container;            
        this.$container = $(container);
        this.$links = this.$container.find('a');

        if (this.options.filter !== '') {
            this.$links = this.$links.filter(this.options.filter);
        }

        this.$window = $(window);
        this.$htmlbody = $('html, body');

        this.$links.on('click.singlePageNav', $.proxy(this.handleClick, this));

        this.didScroll = false;
        this.checkPosition();
        this.setTimer();
    },

    handleClick: function(e) {
        var self  = this,
            link  = e.currentTarget,
            $elem = $(link.hash);  

        e.preventDefault();             

        if ($elem.length) { // Make sure the target elem exists


            // Prevent active link from cycling during the scroll
            self.clearTimer();

            // Before scrolling starts
            if (typeof self.options.beforeStart === 'function') {
                self.options.beforeStart();
            }

            self.setActiveLink(link.hash);

            self.scrollTo($elem, function() { 

                if (self.options.updateHash) {
                    document.location.hash = link.hash;
                }

                self.setTimer();

                // After scrolling ends
                if (typeof self.options.onComplete === 'function') {
                    self.options.onComplete();
                }
            });                            
        }     
    },

    scrollTo: function($elem, callback) {
        var self = this;
        var target = self.getCoords($elem).top;
        var called = false;

        self.$htmlbody.stop().animate(
            {scrollTop: target}, 
            { 
                duration: self.options.speed, 
                complete: function() {
                    if (typeof callback === 'function' && !called) {
                        callback();
                    }
                    called = true;
                }
            }
        );
    },

    setTimer: function() {
        var self = this;

        self.$window.on('scroll.singlePageNav', function() {
            self.didScroll = true;
        });

        self.timer = setInterval(function() {
            if (self.didScroll) {
                self.didScroll = false;
                self.checkPosition();
            }
        }, 250);
    },        

    clearTimer: function() {
        clearInterval(this.timer);
        this.$window.off('scroll.singlePageNav');
        this.didScroll = false;
    },

    // Check the scroll position and set the active section
    checkPosition: function() {
        var scrollPos = this.$window.scrollTop();
        var currentSection = this.getCurrentSection(scrollPos);
        this.setActiveLink(currentSection);
    },        

    getCoords: function($elem) {
        return {
            top: Math.round($elem.offset().top) - this.options.offset
        };
    },

    setActiveLink: function(href) {
        var $activeLink = this.$container.find("a[href='" + href + "']");

        if (!$activeLink.hasClass(this.options.currentClass)) {
            this.$links.removeClass(this.options.currentClass);
            $activeLink.addClass(this.options.currentClass);
        }
    },        

    getCurrentSection: function(scrollPos) {
        var i, hash, coords, section;

        for (i = 0; i < this.$links.length; i++) {
            hash = this.$links[i].hash;

            if ($(hash).length) {
                coords = this.getCoords($(hash));

                if (scrollPos >= coords.top - this.options.threshold) {
                    section = hash;
                }
            }
        }

        // The current section or the first link
        return section || this.$links[0].hash;
    }
};

$.fn.singlePageNav = function(options) {
    return this.each(function() {
        var singlePageNav = Object.create(SinglePageNav);
        singlePageNav.init(options, this);
    });
};

$.fn.singlePageNav.defaults = {
    offset: 0,
    threshold: 120,
    speed: 400,
    currentClass: 'current',
    updateHash: false,
    filter: '',
    onComplete: false,
    beforeStart: false
};

})(jQuery, window, document);

//实用程序
if（type of Object.create！=“函数”）{
Object.create=函数（obj）{
函数F（）{}
F.原型=obj；
返回新的F（）；
};
}
（函数（$，窗口，文档，未定义）{
“严格使用”；
var SinglePageNav={
init：函数（选项、容器）{
this.options=$.extend（{}，$.fn.singlePageNav.defaults，options）；
this.container=容器；
此.$container=$（container）；
this.$links=this.$container.find（'a'）；
如果（this.options.filter！=''）{
this.$links=this.$links.filter（this.options.filter）；
}
此.$window=$（window）；
这个.$htmlbody=$（'html，body'）；
this.links.on（'click.singlePageNav'，$.proxy（this.handleClick，this））；
this.didcoll=false；
这是checkPosition（）；
这个.setTimer（）；
},
handleClick:函数（e）{
var self=这个，
link=e.currentTarget，
$elem=$（link.hash）；
e、 预防默认值（）；
如果（$elem.length）{//请确保目标元素存在
//防止活动链接在滚动期间循环
self.clearTimer（）；
//开始滚动之前
if（typeof self.options.beforeStart==='function'）{
self.options.beforeStart（）；
}
self.setActiveLink（link.hash）；
scrollTo（$elem，function（）{
if（self.options.updateHash）{
document.location.hash=link.hash；
}
self.setTimer（）；
//滚动结束后
if（typeof self.options.onComplete==='function'）{
self.options.onComplete（）；
}
});                            
}     
},
scrollTo:函数（$elem，回调）{
var self=这个；
var target=self.getCoords（$elem）.top；
var=false；
self.$htmlbody.stop（）.animate(
{scrollTop:target}，
{ 
持续时间：self.options.speed，
完成：函数（）{
if（typeof callback==='function'&&&！called）{
回调（）；
}
调用=真；
}
}
);
},
setTimer:function（）{
var self=这个；
self.$window.on（'scroll.singlePageNav'，function（）{
self.didcoll=true；
});
self.timer=setInterval（函数（）{
if（self.didcoll）{
self.didcoll=false；
self.checkPosition（）；
}
}, 250);
},        
clearTimer:function（）{
clearInterval（这个计时器）；
这是.window.off（'scroll.singlePageNav'）；
this.didcoll=false；
},
//检查滚动位置并设置激活部分
checkPosition:function（）{
var scrollPos=this.$window.scrollpop（）；
var currentSection=this.getCurrentSection（scrollPos）；
此.setActiveLink（当前节）；
},        
getCoords:函数（$elem）{
返回{
顶部：Math.round（$elem.offset（）.top）-this.options.offset
};
},
setActiveLink:函数（href）{
var$activeLink=this.$container.find（“a[href=”+href+“]”）；
if（！$activeLink.hasClass（this.options.currentClass））{
this.links.removeClass（this.options.currentClass）；
$activeLink.addClass（this.options.currentClass）；
}
},        
getCurrentSection:函数（scrollPos）{
变量i，散列，坐标，部分；
对于（i=0；i=coords.top-this.options.threshold）{
节=散列；
}
}
}
//当前节或第一个链接
返回部分| | this.$links[0]。散列；
}
};
$.fn.singlePageNav=函数（选项）{
返回此值。每个（函数（）{
var singlePageNav=Object.create（singlePageNav）；
singlePageNav.init（选项，this）；
});
};
$.fn.singlePageNav.defaults={
偏移量：0，
阈值：120，
速度:400,，
currentClass:'当前'，
updateHash:false，
筛选器：“”，
未完成：错误，
beforeStart：错误
};
})（jQuery、窗口、文档）；

问题在于，javascript大幅更改了

单页导航

容器内的默认链接行为。它还将此javascript功能应用于您的外部链接，您不希望为了使它们正常工作而拥有这些链接

• 此位

  e.preventDefault（）阻止浏览器处理clic
  .topnav { ... }
  
  .single-page-nav { ... }
  .single-page-nav li { ... }
  
  .topnav a { ... }
  .topnav a:hover,  .topnav .current { ... }