左上角的徽标滚动到屏幕停止
top left logo scroll to stop of screen
我正在尝试在导航栏的左上角添加一些文本。单击后,我希望页面自动向上滚动到页面顶部
.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
.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
});
});
使用 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>
希望这有帮助,如果我能进一步帮助您,请在下面发表评论。
相关文章:
- 如何知道元素在屏幕上是否可见.如果没有,请滚动页面
- 当canvas's的高度超过屏幕's的高度(当滚动条出现时)
- 到达屏幕末端/顶部时自动滚动
- 当用户将鼠标移到屏幕/图表上时,自动滚动将暂停.如果鼠标移动停止,自动滚动将再次恢复
- 移动/触摸屏幕 - 滑动时水平滚动
- 查找's在可见屏幕(视口)的中间,滚动时
- 一页签出滚动到下一页的屏幕底部
- 如何在滚动/调整大小时保持背景图像覆盖屏幕
- 无限滚动可在快速滚动时跳转到屏幕顶部
- 单击滑块可更改屏幕的滚动
- 使用媒体查询在较小的屏幕上仅滚动模态的距离
- 在屏幕顶部附近滚动元素时触发的侦听器
- JavaScript 用于当用户向下滚动屏幕时弹出的建议框
- 如何检查该元素是否在网页屏幕上,当有人滚动到该元素时,我也想要一个触发器
- 如何滚动以在屏幕底部设置 DIV 的底部(监视器)
- 如果没有使用跨浏览器表达式的滚动条,则无法获取屏幕宽度
- 如何根据屏幕宽度控制
- 单击提交按钮后,屏幕向下滚动,不执行任何操作
- jQuery Tools 可滚动:屏幕上有 3 个项目,但一次滚动一个
- 谷歌地图API在移动设备上滑动与屏幕滚动冲突