加载新页面后平滑滚动以定位 [英] Smooth scroll to anchor after loading new page
问题描述
我想导航到新页面上的锚点,但是我希望页面在顶部加载,然后立即平滑滚动到相关的锚点.能做到吗?
I want to navigate to an anchor point on a new page, but I want the page to load at the top then immediately smooth scroll to the relevant anchor point. Can this be done?
我是使用Javascript的新手.
I am a complete newbie with Javascript.
这是我当前用于在当前页面内平滑滚动的js. 我只是在链接上应用了滚动"类.
This is the js I currently use for smooth scrolling within the current page. I just apply a class of 'scroll' on the link.
非常感谢!
<script>
$(function(){
$('.scroll').on('click',function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top + 'px' }, 1000, 'swing');
});
});
</script>
推荐答案
当浏览器自动检测到hash
并将您带到该位置时...
在我看来,您可以先将滚动位置重置为0 ,然后进行平滑滚动.
As browsers automatically detect the hash
and take you to that position...
It occurs to me that you could first reset the scroll position to 0 and then made the smooth scrolling.
类似...
// to top right away
if ( window.location.hash ) scroll(0,0);
// void some browsers issue
setTimeout( function() { scroll(0,0); }, 1);
$(function() {
// your current click function
$('.scroll').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top + 'px'
}, 1000, 'swing');
});
// *only* if we have anchor on the url
if(window.location.hash) {
// smooth scroll to the anchor id
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top + 'px'
}, 1000, 'swing');
}
});
编辑 :将scroll(0,0)
移到$(function(){...});
外部以防止闪烁.
此外,还添加了具有工作示例的代码段.
在全屏模式下观看效果最好
Edit: Move the scroll(0,0)
outside $(function(){...});
to prevent flickering.
Also, Snippet with working example was added.
The effect is best appreciated when viewed in full screen
html, body {
margin: 0;
padding: 0;
}
.hidden-code {
display: none;
visibility: hidden;
opacity: 0;
}
.header {
background-color: #ccc;
padding: 5px;
}
.header li {
padding: 5px;
margin: 5px;
display: inline-block;
}
.articles > div {
border: 1px solid;
margin: 10px;
padding: 250px 50px;
background-color: #ccc;
}
div:before {
content: attr(id);
}
.footer {
text-align: center;
}
<div class="header">
<ul>
<li>page header title/navbar</li>
<li><a class="scroll" href="#text-1">#text-1</a></li>
<li><a class="scroll" href="#text-2">#text-2</a></li>
<li><a class="scroll" href="#text-3">#text-3</a></li>
<li><a class="scroll" href="#text-4">#text-4</a></li>
<li><a class="scroll" href="#text-5">#text-5</a></li>
<li><a class="scroll" href="#text-6">#text-6</a></li>
<li><a class="scroll" href="#text-7">#text-7</a></li>
<li><a class="scroll" href="#text-8">#text-8</a></li>
</ul>
</div>
<div class="container">
<div class="content">
<div class="articles">
<div id="text-1"></div>
<div id="text-2"></div>
<div id="text-3"></div>
<div id="text-4"></div>
<div id="text-5"></div>
<div id="text-6"></div>
<div id="text-7"></div>
<div id="text-8"></div>
</div>
</div>
<div class="footer">company © 2015</div>
</div>
<div class="hidden-code">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
// to top right away
if ( window.location.hash ) scroll(0,0);
// void some browsers issue
setTimeout( function() { scroll(0,0); }, 1);
// any position
$(function() {
// your current click function
$('.scroll').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top + 'px'
}, 1000, 'swing');
});
// *only* if we have anchor on the url
if(window.location.hash) {
// smooth scroll to the anchor id
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top + 'px'
}, 1000, 'swing');
}
});
</script>
</div>
这篇关于加载新页面后平滑滚动以定位的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!