左上标志滚动到屏幕停止答案

【问题标题】：top left logo scroll to stop of screen左上标志滚动到屏幕停止
【发布时间】：2014-11-18 10:22:48
【问题描述】：

我正在尝试在导航栏的左上角添加一些文本。点击后，我希望页面自动滚动回页面顶部

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

【问题讨论】：

标签： javascript jquery html

【解决方案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
    });
});

【讨论】：

【解决方案2】：

这很容易做到，使用 jQuery animate() 方法。下面是一个示例，说明如何做到这一点 - 非常简单。

$(document).ready(function(){
	
	//Click event to scroll to top
	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});
	
});

.scrollToTop{
	font-weight: bold;
	text-decoration: none;
	position:fixed;
	top:0;
	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>

希望对您有所帮助，如果我能进一步帮助您，请在下方评论。

【讨论】：