导航不会滚动到锚点链接

时间：2016-03-02 23:19:17

标签： jquery css scroll menu navigation

我有这个导航让我今晚疯狂。我无法找到使其正常工作的解决方案。我认为它在css和js之间有冲突但我无法找到问题。下面我将发布代码和代码链接：

HTML 

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Ilir Bajrami">



<title>New web test</title>






        <link rel="stylesheet" type="text/css" href="css/component.css" />

     <link rel="stylesheet" type="text/css" href="css/normalize.css" />



    <link rel="stylesheet" type="text/css" href="css/demo.css" /> 

  <!--  <link href="css/rotating-card.css" rel="stylesheet" /> -->

   <link href="css/style.css" rel="stylesheet" type="text/css"> 



    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />



     <!--Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 



</head>
<body>

     <div class="container" id="faqe1">


         <!-- MENUJA -->




         <div class="col-md-4">


       <div class="dotstyle dotstyle-tooltip">

                    <ul>
                        <li class="current"><a href="#faqe1">Home</a></li>
                        <li><a href="#faqe2">About</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>    <!-- Menuja mbaron -->





       </div>

       <div class="col-md-4"></div>


         <div class="col-md-4"></div>





     </div> <!-- Kontaineri faqe1 mbaron -->



    <div class="container" id="faqe2">


        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>

        <h2>ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk
        ajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjkajfhkahfjkdhfjk</h2>




    </div> <!-- kontaineri faqe2 mbaron -->




 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>   


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="js/modernizr-2.6.2.min.js"></script>
        <script src="js/dots.js"></script>
    <script src="js/main.js"></script>

    <script>
            [].slice.call( document.querySelectorAll( '.dotstyle > ul' ) ).forEach( function( nav ) {
                new DotNav( nav, {
                    callback : function( idx ) {
                        //console.log( idx )
                    }
                } );
            } );
        </script>







</body>

CSS 

html,
body {
  height: 100%;
}


#faqe1 {

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #1d1d1d;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;



}



/* Faqe2 */


#faqe2 {

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image:url("../images/Unknown-2.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;

}
/* Common styles and resets */

.dotstyle ul {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 9999;
    top:25em;
    left: -8em;

    transform: rotate(90deg)


}

.dotstyle li {
    position: relative;
    display: block;
    float: left;
    margin: 0 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;




}

.dotstyle li a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border-radius: 50%;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
    text-indent: -999em; /* make the text accessible to screen readers */
    cursor: pointer;
    position: absolute;
    text-decoration: none;


}

.dotstyle li a:focus {
    outline: none;
}

/* Individual styles and effects */



/* Tooltip */

.dotstyle-tooltip li {
    border: 1px solid #fff;
    border-radius: 50%;
    z-index: 1;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;






}

.dotstyle-tooltip li a {
    top: auto;
    bottom: 250%;
    left: 50%;
    visibility: hidden;
    padding: 0 10px;
    width: auto;
    height: auto;
    border-radius: 5px;
    background-color: transparent;
    color: #fff;
    text-indent: 0;
    line-height: 2;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease;




}



.dotstyle-tooltip li a::after { /* http: //cssarrowplease.com/ */
    position: absolute;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 10px;
    border-color: transparent;
    border-top-color: #fff;
    content: '';
    pointer-events: none;
    top: 99%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;





}

.no-touch .dotstyle-tooltip li:hover a,
.dotstyle-tooltip li.current a {
    z-index: 100;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0%);
    transform: translateX(-50%) translateY(0%);
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;




}

.dotstyle-tooltip li.current {
    border-color: #76c043;

    border: 2px solid #76c043;
}

.dotstyle-tooltip li:hover {
    z-index: 100;
}

.no-touch .dotstyle-tooltip ul:hover li.current a {
    opacity: 0.2;
}

.dotstyle-tooltip ul li.current:hover a {
    opacity: 1;
}

JS 

;( function( window ) {

    'use strict';

    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    function DotNav( el, options ) {
        this.nav = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
    }

    DotNav.prototype.options = {};

    DotNav.prototype._init = function() {
        // special case "dotstyle-hop"
        var hop = this.nav.parentNode.className.indexOf( 'dotstyle-hop' ) !== -1;

        var dots = [].slice.call( this.nav.querySelectorAll( 'li' ) ), current = 0, self = this;

        dots.forEach( function( dot, idx ) {
            dot.addEventListener( 'click', function( ev ) {
                ev.preventDefault();
                if( idx !== current ) {
                    dots[ current ].className = '';

                    // special case
                    if( hop && idx < current ) {
                        dot.className += ' current-from-right';
                    }

                    setTimeout( function() {
                        dot.className += ' current';
                        current = idx;
                        if( typeof self.options.callback === 'function' ) {
                            self.options.callback( current );
                        }
                    }, 25 );                        
                }
            } );
        } );
    }

    // add to global namespace
    window.DotNav = DotNav;

})( window );

{{3}}

0 个答案:

没有答案
相关问题
最新问题