滾動使用的href ID

Question

頂部我要滾動的DIV頂部position.I有問題，拿到HREF value.now在console.log(a);

function myFunction() 
 
\t { 
 
\t  var a=$(this).attr('href'); 
 
\t \t console.log(a); 
 
\t \t $('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500); 
 
}

#consulting,#segments,#partner,#insights{min-height:100vh;} 
 
    .secMenu{position:fixed; 
 
    }

<div class="container-fluid"> 
 
\t <div class="row secMenu"> 
 
\t \t <div class="col-md-9 col-sm-12 menu"> 
 
\t \t <ul class="nav navMenu"> 
 
\t \t 
 
\t \t \t <li class="test1"><a href="#consulting" onclick="myFunction()">Consulting & Solutions</a></li> 
 
\t \t \t <li class="test2"><a href="#segments" onclick="myFunction()">Segments</a></li> 
 
\t \t \t <li class="test3"><a href="#partner" onclick="myFunction()">Our Partners</a></li> 
 
\t \t \t <li class="test4"><a href="#insights" onclick="myFunction()">Perspectives</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t \t 
 
\t </div> <!--End of second menu --> 
 
\t  <div class="row"> 
 
\t <div id="consulting"> 
 
\t div1 
 
\t \t </div> 
 
\t \t <div id="segments"> 
 
\t \t div11 
 
\t \t </div> 
 
\t \t <div id="partner"> 
 
\t \t div111 
 
\t \t </div> 
 
\t \t <div id="insights"> 
 
\t \t div1111 
 
\t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 1

我不確定 'a' 返回已經替代了你所用的東西，但它也是一樣的。我刪除了你使用的功能，而是使用jQuery。希望我的回答對你的作品：

$('.nav li a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var a = $(this).attr('href'); 
 
    $('html, body').animate({ 
 
    scrollTop: $(a).offset().top 
 
    }, 500); 
 
});

#consulting, 
 
#segments, 
 
#partner, 
 
#insights { 
 
    min-height: 100vh; 
 
} 
 
.secMenu { 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row secMenu"> 
 
    <div class="col-md-9 col-sm-12 menu"> 
 
     <ul class="nav navMenu"> 
 

 
     <li class="test1"><a href="#consulting">Consulting & Solutions</a> 
 
     </li> 
 
     <li class="test2"><a href="#segments">Segments</a> 
 
     </li> 
 
     <li class="test3"><a href="#partner">Our Partners</a> 
 
     </li> 
 
     <li class="test4"><a href="#insights">Perspectives</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
    <!--End of second menu --> 
 
    <div class="row"> 
 
    <div id="consulting"> 
 
     div1 
 
    </div> 
 
    <div id="segments"> 
 
     div11 
 
    </div> 
 
    <div id="partner"> 
 
     div111 
 
    </div> 
 
    <div id="insights"> 
 
     div1111 
 
    </div> 
 
    </div> 
 
</div>

要看到它在行動，你可以打運行的代碼片段按鈕上方或者你可以看到一個小提琴here。

Answer 2

因爲this默認綁定到全局對象（在瀏覽器中它是window）。

您可以試試通過this至myFunction()像這樣：myFunction(this)。並且在myFunction定義：function myFunction(target) {...},target現在引用了錨元素。