我在页面中创建了2个锚点 默认情况下,每当单击锚链接时,它都会直接跳至请求的部分
启用平滑滚动的一种简单方法是将其添加到CSS文件中,但这会影响整个html页面,我不希望这样
我希望此平滑Scrolling属性仅适用于我页面中的单个锚点(对于本示例来说,第1节锚点),而不是每个锚点都通用
HTML代码包含在下面的摘要中
html {
scroll-behavior: smooth;
}
<a href="#Section1">Section 1</a><br>
<a href="#Section2">Section 2</a>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<a class="anchor" id="Section1"> </a>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<a class="anchor2" id="Section2"> </a>
答案 0 :(得分:1)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
jQuery(function($) {
// The speed of the scroll in milliseconds
var speed = 1000;
// Find links that are #anchors and scroll to them
$('a[href^=#]')
.not('.lp-pom-form .lp-pom-button')
.unbind('click.smoothScroll')
.bind('click.smoothScroll', function(event) {
event.preventDefault();
$('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, speed);
});
});
</script>
答案 1 :(得分:1)
这是我使用(香草)JavaScript的解决方案。
我只是根据链接上设置的className
属性切换<html>
元素的data-smooth-scroll
。
"use strict";
document.addEventListener('click', function(e) {
var className = 'smooth';
var classList = document.documentElement.classList;
if (e.target.dataset.smoothScroll) {
classList.add(className)
} else {
classList.remove(className)
}
})
html.smooth {
scroll-behavior: smooth;
}
section {
width: 80%;
border: 1px solid gold;
margin: 50px auto;
height: 100vh;
}
<a href="#Section1">Section 1</a><br>
<a href="#Section2">Section 2</a>
<a href="#Section3" data-smooth-scroll="1">Section 3</a>
<a class="anchor" id="Section1"> </a>
<section>
<h2>Section 2</h2>
</section>
<a class="anchor" id="Section2"> </a>
<section>
<h2>Section 2</h2>
</section>
<a class="anchor" id="Section3"> </a>
<section>
<h2>Section 3</h2>
</section>
如果您不希望链接决定是否平滑滚动,而是决定目标锚点,那么应该可以
"use strict";
document.addEventListener('click', function(e) {
var className = 'smooth';
var classList = document.documentElement.classList;
classList.remove(className)
if (e.target.tagName.toLowerCase() === 'a') {
var id = e.target.hash.replace(/^#/, '')
var anchor = document.getElementById(id);
if (anchor && anchor.dataset.smoothScroll) {
classList.add(className)
}
}
})
html.smooth {
scroll-behavior: smooth;
}
section {
width: 80%;
border: 1px solid gold;
margin: 50px auto;
height: 100vh;
}
<a href="#Section1">Section 1</a><br>
<a href="#Section2">Section 2</a>
<a href="#Section3">Section 3</a>
<a class="anchor" id="Section1"> </a>
<section>
<h2>Section 2</h2>
</section>
<a class="anchor" id="Section2" data-smooth-scroll="1"> </a>
<section>
<h2>Section 2</h2>
</section>
<a class="anchor" id="Section3"> </a>
<section>
<h2>Section 3</h2>
</section>