2014-11-18 3 views
0

Я пытаюсь добавить текст в верхнем левом углу моей навигационной панели. После щелчка, я хочу, чтобы страница автоматически прокручивать назад к началу страницыверхний левый логотип прокрутки до остановки экрана

HTML:

<nav class="navbar navbar-default navbar-fixed-top"> 
    <a id="logo" href=".navbar">LOGO HERE</a> 
    <ul id="nav_pills" class="nav nav-pills" role="tablist"> 
     <li role="presentation"> 
     <a id="test" href="#services">Services</a> 
     </li> 
     <li role="presentation"> 
     <a href="#about">About</a> 
     </li> 
     <li role="presentation"> 
     <a href="#portfolio">Portfolio</a> 
     </li> 
     <li role="presentation"> 
     <a href="#team">Team</a> 
     </li> 
     <li role="presentation"> 
     <a href="#contact">Contact</a> 
     </li> 
    </ul> 
    </nav> 

Мой JS до сих пор:

$(document).ready(function() { 
    // easing scroll bluhd 
    var hrefObjects = $("li a"); 
    hrefObjects.push($(".welcome-btn")); 
    hrefObjects.push($("#logo")); 
    hrefObjects.each(function() { 
     $(this).on("click", function(e) { 
      var mode = "easeInOutQuart"; 
      e.preventDefault(); 
      $('html, body').animate({ 
       scrollTop: $(this.hash).offset().top 
      }, 750, mode); 
     }); 
    }) 
}); 

В настоящее время я получаю эту ошибку и Я не уверен, как это исправить.

Uncaught TypeError: Cannot read property 'top' of undefined

ответ

1

.push() не является допустимой функция JQuery. hrefObjects - объект jQuery, а не массив.

Упростить его:

$(document).ready(function() { 
    $("li a, .welcome-btn, #logo").on("click", null, function(e) { 
     $('html, body').animate({ scrollTop: 0 }, 750, "easeInOutQuart"); 
     return false; // prevents default 
    }); 
}); 
+0

Плохое спасибо! – Liondancer

+0

'li a' довольно широк, вы можете использовать идентификатор списка вместо селектора, например' #mainmenu li a' –

1

Это очень легко сделать, используя метод JQuery animate(). Вот пример того, как вы могли это сделать - очень просто.

$(document).ready(function(){ 
 
\t 
 
\t //Click event to scroll to top 
 
\t $('.scrollToTop').click(function(){ 
 
\t \t $('html, body').animate({scrollTop : 0},800); 
 
\t \t return false; 
 
\t }); 
 
\t 
 
});
.scrollToTop{ 
 
\t font-weight: bold; 
 
\t text-decoration: none; 
 
\t position:fixed; 
 
\t top:0; 
 
\t left:40px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<a href="#" class="scrollToTop">Company Name</a> 
 

 
Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>Bla<br>

Надеется, что это помогает, и комментарию ниже, если я могу помочь вам в дальнейшем.

Смежные вопросы