Javascript 默认情况下,如何使容器中的滚动从某个链接开始?
请看上面的代码笔。基本上,当有人访问页面时,默认情况下容器应设置为“Section 3”,然后他们需要向上或向下滚动以查看其余内容 我已经试过了,但失败了Javascript 默认情况下,如何使容器中的滚动从某个链接开始?,javascript,html,css,Javascript,Html,Css,请看上面的代码笔。基本上,当有人访问页面时,默认情况下容器应设置为“Section 3”,然后他们需要向上或向下滚动以查看其余内容 我已经试过了,但失败了 <li class="active"> <a href="#section3">Section 3</a> </li> 引导示例 $(窗口)。加载(函数(){ $('html,body')。设置动画({ scrollTop:$('#section3').offset().top},1
<li class="active">
<a href="#section3">Section 3</a>
</li>
引导示例
$(窗口)。加载(函数(){
$('html,body')。设置动画({
scrollTop:$('#section3').offset().top},1000);
});
});
身体{
/*位置:相对位置*/
}
#第1节{填充顶部:50px;高度:500px;颜色:#fff;背景色:#1E88E5;}
#第2节{填充顶部:50px;高度:500px;颜色:#fff;背景色:#673ab7;}
#第3节{填充顶部:50px;高度:500px;颜色:#fff;背景色:#ff9800;}
#第41节{填充顶部:50px;高度:500px;颜色:#fff;背景色:#00bcd4;}
#第42节{填充顶部:50px;高度:500px;颜色:#fff;背景色:#009688;}
-
第一节
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
第二节
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
第三节
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
第4节子菜单1
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
第4节子菜单2
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
您有两个选项,第一个选项使您的初始http请求包含#第3节
你也可以把它添加到你的身体里
<body onload="window.location.href="#section3">
有两种方法可以解决这个问题 1。创建永久链接。 将URL设置为
www.myawesomesite.com/#section3
2。使用javascript在加载时滚动页面。
将此代码添加到脚本中
$(window).load(function() {
$('html, body').animate({
scrollTop: $('#section3').offset().top}, 1000);
});
它将在页面加载时将页面滚动到#Section 3的顶部位置。当DOM就绪时,可以使用此代码
$(document).ready(function(){
window.location.hash = "#" + "section3";
});
检查如果您确定您的内容位于页面的最底部,您可以将其添加到页面的onload功能中
window.scrollTo(0,document.body.scrollHeight);
我尝试了选项2:指向第3节的链接处于活动状态,但滚动仍位于顶部添加到“请参见此处:第3节导航已激活,但滚动本身未向下滚动?”@topazt链接不包含jquery代码。你给我的链接中没有js代码。@topazt很抱歉我做了一个更改并检查了我发布的笔。是的,这很有效。我能在上面看到第2节吗?(第3节中间有第2节的底部在偷看?”@托帕兹我已经更新了钢笔。请检查你是否想这样。如果我得到了你。代替滚动页面,你能滚动这个容器吗?