同一页面 ID 中某些元素的锚标记不起作用
Anchor tag to some element in same page id doesn't work
哈哈。我的小项目遇到了麻烦。我已经创建了 <a href="slogannya">some icon</a> 和 <blockquote id="slogannya">，但是当我点击 <a> 标签时它不起作用。这是我的代码：
Html
<section class="to-content">
<a class="scrollTo" href="#slogannya">
<button type="button">
<i class="material-icons">keyboard_arrow_down</i>
</button>
</a>
</section>
<section class="slogan">
<blockquote id="slogannya">
<p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
</blockquote>
</section>
Jquery
$(document).ready(function () {
$(".scrollTo").on('click', function (e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: ($(target).offset().top)
}, 2000);
});
});
我怎样才能完成这项工作？请帮助我:)
编辑
我知道我的问题是什么。在我的项目中，我有一个名为 'general.css' 的 css（此 css 内容 css 重置和任何页面的其他样式）。在这个 css 中，它使任何元素成为 box-sizing: border-box; 和其他样式。我不知道具体是什么问题。但是当我删除 'general.css' 时，平滑滚动就可以了。谢谢所有朋友的回答:)，我很感激！！
实际上它可以工作，但问题是 blockquote 标签紧跟在锚标签之后，但是如果你在它们之间做一个 space 你会看到动画正在运行
简而言之：只有当滚动条出现在 window 上并且两个元素之间有一个 space 时，动画才会起作用
看看下面的例子，你会发现它有效
$(document).ready(function () {
$(".scrollTo").on('click', function (e) {
console.log('clicked');
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: ($(target).offset().top)
}, 2000);
});
});
.any{
height:400px ;
width : 100% ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="to-content">
<a class="scrollTo" href="#slogannya">
<button type="button">
<i class="material-icons">keyboard_arrow_down</i>
</button>
</a>
</section>
<div class='any'></div>
<section class="slogan">
<blockquote id="slogannya">
<p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
</blockquote>
</section>
它工作正常，但提供的代码没有可滚动的高度，也不是平滑的滚动。如果不是这种情况，请尝试此操作。
$(document).ready(function() {
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1500, function() {
window.location.hash = hash;
});
}
});
});
.to-content {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="to-content">
<a href="#slogannya">
<button type="button">
<i class="material-icons">keyboard_arrow_down</i>
</button>
</a>
</section>
<section class="slogan">
<blockquote id="slogannya">
<p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
</blockquote>
</section>
您只需要 HTML 一些 <a>nchors 和您想要的任何元素（更多 <a>nchors 会变得疯狂）。 顺便说一句，目标 ID 对您不起作用的原因是 href 需要 url 的前缀 #。前任。 <a href="#ID"... 它可能不起作用的另一个原因是 <a>nchor 和目标元素彼此太近了，因此理想情况下目标至少应该足够远以便滚动需要到达那里。
对于目标元素，确保它有一个 #id。例如 <div id='ID'...
接下来，为每个目的地创建一个或多个 <a>锚并将它们的 href 值设置为 #+ID。前任。 <a href='#ID...
如果目标元素恰好是 <a>nchor，我们也可以使用 name 属性。前任。 <a name='NAME'...
演示
main {
margin: 50px auto;
}
a[name] {
background: black;
color: white
}
<main id='main'>
<header>
<h1>Anchor Test</h1>
<nav>
<a href='#s0'>Section 1</a>
<a href='#s1'>Section 2</a>
<a href='#s2'>Section 3</a>
</nav>
<nav id='toTop'>
<a href='#end'>End </a>
<a href='#a0'>Two-handed Weapon</a>
<a href='#a1'>Cheapskates</a>
<a href='#a2'>Devil Dance</a>
</nav>
</header>
<hr>
<section id='s0'>
<h2>Section 1</h2>
<p>Base save bonus checked cold dangers cold domain compulsion subschool constrict current hit points dead diminutive domain spell flank gargantuan hit hit die improved grab knocked down manufactured weapons movement modes negative energy plane off hand
psionics result skill points spell version threat total cover transitive plane turn resistance turn undead undeath domain. Angel subtype caster level concealment continuous damage death domain energy drained extraplanar subtype guardinal subtype
improved evasion lethal damage medium melee attack pounce rake subject <a name='a0'>two-handed weapon</a> undead type.</p>
</section>
<hr>
<section id='s1'>
<h2>Section 2</h2>
<p>And it better be long as the troubles in my head hammer my bones on the anvil of daylight i'd buy some time i'm so tired don't know where to begin into your brother's cup just to see the dogs runnin on a blackboard night ringin' in my ears the information
is ravenous you're acting like it's chill, when the deal's getting. And all the toilets are overflowing and i'm falling out of the conversation and the band playin' down below are those dogs or are those dogmas? black can spell to be day in the
club tonight doldrums are pounding, <a name='a1'>cheapskates</a> are clowning this town flap your wings and leap out the window how do you play? she doesn't even know it's wrong she's the sister of avarice sipping the golden days on a riptide snooty.
some static is lulling me to sleep talkin' to the devil and drinkin' a coke the dishes wash good to meet you in that land try not to drown where can you duck when they shoot you full of pigeon holes who are you? you said go.</p>
</section>
<hr>
<section id='s2'>
<h2>Section 3</h2>
<p>A little knowledge is a dangerous thing. boys will be boys. curiosity killed the cat. cut your coat according to your cloth. do not bite the hand that feeds you. do not change horses in midstream. first impressions are the most lasting. he who hesitates
is lost. if at first you do not succeed, try, try again. it is best to be on the safe side. kindness in words creates confidence. kindness in thinking creates profoundness. kindness in giving creates love. let the buyer beware. let your hair down.
lightning never strikes twice in the same place. money makes many things, but also makes <a name='a2'>devil dance</a>. never speak ill of the dead. one might as well be hanged for a sheep as a lamb. penny wise and pound foolish. practice makes perfect.
silence is golden. talk is cheap. the grass is always greener on the other side of the fence. the road to hell is paved with good intentions. there is no accounting for tastes. third time is a charm. to the victor go the spoils. walnuts and pears
you plant for your heirs. you cannot make an omelette without breaking eggs..</p>
</section>
</main>
<footer>
<nav>
<a href='#s0'>Section 1</a>
<a href='#s1'>Section 2</a>
<a href='#s2'>Section 3</a>
</nav>
<nav id='end'>
<a href='#main'>Top </a>
</nav>
</footer>
哈哈。我的小项目遇到了麻烦。我已经创建了 <a href="slogannya">some icon</a> 和 <blockquote id="slogannya">，但是当我点击 <a> 标签时它不起作用。这是我的代码：
Html
<section class="to-content">
<a class="scrollTo" href="#slogannya">
<button type="button">
<i class="material-icons">keyboard_arrow_down</i>
</button>
</a>
</section>
<section class="slogan">
<blockquote id="slogannya">
<p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
</blockquote>
</section>
Jquery
$(document).ready(function () {
$(".scrollTo").on('click', function (e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: ($(target).offset().top)
}, 2000);
});
});
我怎样才能完成这项工作？请帮助我:)
编辑
我知道我的问题是什么。在我的项目中，我有一个名为 'general.css' 的 css（此 css 内容 css 重置和任何页面的其他样式）。在这个 css 中，它使任何元素成为 box-sizing: border-box; 和其他样式。我不知道具体是什么问题。但是当我删除 'general.css' 时，平滑滚动就可以了。谢谢所有朋友的回答:)，我很感激！！
实际上它可以工作，但问题是 blockquote 标签紧跟在锚标签之后，但是如果你在它们之间做一个 space 你会看到动画正在运行
简而言之：只有当滚动条出现在 window 上并且两个元素之间有一个 space 时，动画才会起作用 看看下面的例子，你会发现它有效
$(document).ready(function () {
$(".scrollTo").on('click', function (e) {
console.log('clicked');
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: ($(target).offset().top)
}, 2000);
});
});
.any{
height:400px ;
width : 100% ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="to-content">
<a class="scrollTo" href="#slogannya">
<button type="button">
<i class="material-icons">keyboard_arrow_down</i>
</button>
</a>
</section>
<div class='any'></div>
<section class="slogan">
<blockquote id="slogannya">
<p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
</blockquote>
</section>
它工作正常，但提供的代码没有可滚动的高度，也不是平滑的滚动。如果不是这种情况，请尝试此操作。
$(document).ready(function() {
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1500, function() {
window.location.hash = hash;
});
}
});
});
.to-content {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="to-content">
<a href="#slogannya">
<button type="button">
<i class="material-icons">keyboard_arrow_down</i>
</button>
</a>
</section>
<section class="slogan">
<blockquote id="slogannya">
<p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
</blockquote>
</section>
您只需要 HTML 一些 <a>nchors 和您想要的任何元素（更多 <a>nchors 会变得疯狂）。 顺便说一句，目标 ID 对您不起作用的原因是 href 需要 url 的前缀 #。前任。 <a href="#ID"... 它可能不起作用的另一个原因是 <a>nchor 和目标元素彼此太近了，因此理想情况下目标至少应该足够远以便滚动需要到达那里。
对于目标元素，确保它有一个
#id。例如<div id='ID'...接下来，为每个目的地创建一个或多个
<a>锚并将它们的href值设置为#+ID。前任。<a href='#ID...如果目标元素恰好是
<a>nchor，我们也可以使用name属性。前任。<a name='NAME'...
演示
main {
margin: 50px auto;
}
a[name] {
background: black;
color: white
}
<main id='main'>
<header>
<h1>Anchor Test</h1>
<nav>
<a href='#s0'>Section 1</a>
<a href='#s1'>Section 2</a>
<a href='#s2'>Section 3</a>
</nav>
<nav id='toTop'>
<a href='#end'>End </a>
<a href='#a0'>Two-handed Weapon</a>
<a href='#a1'>Cheapskates</a>
<a href='#a2'>Devil Dance</a>
</nav>
</header>
<hr>
<section id='s0'>
<h2>Section 1</h2>
<p>Base save bonus checked cold dangers cold domain compulsion subschool constrict current hit points dead diminutive domain spell flank gargantuan hit hit die improved grab knocked down manufactured weapons movement modes negative energy plane off hand
psionics result skill points spell version threat total cover transitive plane turn resistance turn undead undeath domain. Angel subtype caster level concealment continuous damage death domain energy drained extraplanar subtype guardinal subtype
improved evasion lethal damage medium melee attack pounce rake subject <a name='a0'>two-handed weapon</a> undead type.</p>
</section>
<hr>
<section id='s1'>
<h2>Section 2</h2>
<p>And it better be long as the troubles in my head hammer my bones on the anvil of daylight i'd buy some time i'm so tired don't know where to begin into your brother's cup just to see the dogs runnin on a blackboard night ringin' in my ears the information
is ravenous you're acting like it's chill, when the deal's getting. And all the toilets are overflowing and i'm falling out of the conversation and the band playin' down below are those dogs or are those dogmas? black can spell to be day in the
club tonight doldrums are pounding, <a name='a1'>cheapskates</a> are clowning this town flap your wings and leap out the window how do you play? she doesn't even know it's wrong she's the sister of avarice sipping the golden days on a riptide snooty.
some static is lulling me to sleep talkin' to the devil and drinkin' a coke the dishes wash good to meet you in that land try not to drown where can you duck when they shoot you full of pigeon holes who are you? you said go.</p>
</section>
<hr>
<section id='s2'>
<h2>Section 3</h2>
<p>A little knowledge is a dangerous thing. boys will be boys. curiosity killed the cat. cut your coat according to your cloth. do not bite the hand that feeds you. do not change horses in midstream. first impressions are the most lasting. he who hesitates
is lost. if at first you do not succeed, try, try again. it is best to be on the safe side. kindness in words creates confidence. kindness in thinking creates profoundness. kindness in giving creates love. let the buyer beware. let your hair down.
lightning never strikes twice in the same place. money makes many things, but also makes <a name='a2'>devil dance</a>. never speak ill of the dead. one might as well be hanged for a sheep as a lamb. penny wise and pound foolish. practice makes perfect.
silence is golden. talk is cheap. the grass is always greener on the other side of the fence. the road to hell is paved with good intentions. there is no accounting for tastes. third time is a charm. to the victor go the spoils. walnuts and pears
you plant for your heirs. you cannot make an omelette without breaking eggs..</p>
</section>
</main>
<footer>
<nav>
<a href='#s0'>Section 1</a>
<a href='#s1'>Section 2</a>
<a href='#s2'>Section 3</a>
</nav>
<nav id='end'>
<a href='#main'>Top </a>
</nav>
</footer>