jquery - 带有特殊字符的 jQuery 平滑滚动

Question

此 jQuery 代码添加了平滑滚动。但它仅适用于“#section-1”或“#1”等“普通”锚点。它不适用于这些锚点，例如：“#Section 1”。是否可以更改适用于所有字符的脚本。

$(document).on('click', 'a[href^="#"]', function (event) {
  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 1000);
});

标签： jquery

Answer 1

使用特殊字符可以正常工作。

$(document).on('click', 'a[href^="#"]', function(event) {
  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 1000);
});

div {
  padding: 5rem;
  line-height: 2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='#Äpfel'>Äpfel</a>
<a href='#Section1'>Section1</a>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed pulvinar proin gravida hendrerit lectus. Mauris in aliquam sem fringilla ut morbi tincidunt. Nulla at volutpat diam ut venenatis.
  Purus viverra accumsan in nisl nisi scelerisque. Neque vitae tempus quam pellentesque nec nam aliquam sem et. Habitant morbi tristique senectus et netus. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Scelerisque purus semper eget duis
  at tellus at. Arcu dui vivamus arcu felis bibendum ut. Eget mi proin sed libero enim sed faucibus turpis in. Tempor orci dapibus ultrices in iaculis nunc. Commodo elit at imperdiet dui accumsan sit. Nunc congue nisi vitae suscipit tellus mauris a diam.
  Sit amet est placerat in egestas erat imperdiet. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Ipsum dolor sit amet consectetur adipiscing elit ut. Dignissim sodales ut eu sem integer vitae justo eget. Arcu cursus euismod quis viverra
  nibh.
  <br><br> Sed odio morbi quis commodo odio aenean sed adipiscing diam. Neque gravida in fermentum et sollicitudin ac orci. Viverra nam libero justo laoreet sit amet cursus. Nunc faucibus a pellentesque sit amet porttitor eget dolor morbi. Tincidunt id
  aliquet risus feugiat in ante. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Eget velit aliquet sagittis id consectetur purus. Id aliquet lectus proin nibh nisl condimentum id venenatis. Adipiscing bibendum est ultricies integer
  quis. Congue nisi vitae suscipit tellus mauris a. Sed risus ultricies tristique nulla aliquet enim tortor at. Enim nec dui nunc mattis enim ut tellus. Mi bibendum neque egestas congue quisque egestas. Cursus risus at ultrices mi. Sed nisi lacus sed
  viverra tellus in hac habitasse. Vitae elementum curabitur vitae nunc sed.
  <br><br> Aliquet nec ullamcorper sit amet risus nullam eget. At consectetur lorem donec massa sapien faucibus et molestie. Eget egestas purus viverra accumsan in nisl. Ac tortor dignissim convallis aenean et tortor. Tortor posuere ac ut consequat semper
  viverra. Etiam non quam lacus suspendisse faucibus. Non consectetur a erat nam at lectus urna duis convallis. Tincidunt eget nullam non nisi est sit. Tellus id interdum velit laoreet. Leo a diam sollicitudin tempor id. Dui faucibus in ornare quam viverra.
  Massa tincidunt dui ut ornare lectus sit. Tellus orci ac auctor augue mauris augue neque gravida. Nunc consequat interdum varius sit amet mattis vulputate. Morbi blandit cursus risus at ultrices mi tempus. Pellentesque habitant morbi tristique senectus
  et. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Amet porttitor eget dolor morbi non arcu.
  <br><br> Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Donec ac odio tempor orci. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Viverra suspendisse potenti nullam ac tortor. Fermentum posuere urna nec
  tincidunt praesent semper feugiat nibh. Est velit egestas dui id ornare arcu odio ut. Etiam erat velit scelerisque in dictum non. Nisi porta lorem mollis aliquam. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Euismod nisi porta
  lorem mollis aliquam ut. Ac feugiat sed lectus vestibulum mattis ullamcorper velit. Vulputate ut pharetra sit amet aliquam. Risus commodo viverra maecenas accumsan lacus vel facilisis. Tristique senectus et netus et malesuada fames ac turpis.
  <br><br> Suscipit tellus mauris a diam maecenas sed. Volutpat odio facilisis mauris sit amet massa vitae. Quis varius quam quisque id diam. Ac auctor augue mauris augue neque. Morbi tempus iaculis urna id volutpat lacus. Nibh ipsum consequat nisl vel
  pretium lectus quam id leo. Felis imperdiet proin fermentum leo vel. Id semper risus in hendrerit. Massa ultricies mi quis hendrerit dolor magna eget est. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Auctor neque vitae tempus quam
  pellentesque nec. Amet cursus sit amet dictum sit amet justo donec enim. Molestie a iaculis at erat pellentesque. Sed tempus urna et pharetra pharetra massa. Sapien nec sagittis aliquam malesuada.

  <h2 id='Äpfel'>Example headline</h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed pulvinar proin gravida hendrerit lectus. Mauris in aliquam sem fringilla ut morbi tincidunt. Nulla at volutpat diam ut venenatis.
  Purus viverra accumsan in nisl nisi scelerisque. Neque vitae tempus quam pellentesque nec nam aliquam sem et. Habitant morbi tristique senectus et netus. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Scelerisque purus semper eget duis
  at tellus at. Arcu dui vivamus arcu felis bibendum ut. Eget mi proin sed libero enim sed faucibus turpis in. Tempor orci dapibus ultrices in iaculis nunc. Commodo elit at imperdiet dui accumsan sit. Nunc congue nisi vitae suscipit tellus mauris a diam.
  Sit amet est placerat in egestas erat imperdiet. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Ipsum dolor sit amet consectetur adipiscing elit ut. Dignissim sodales ut eu sem integer vitae justo eget. Arcu cursus euismod quis viverra
  nibh.
  <br><br> Sed odio morbi quis commodo odio aenean sed adipiscing diam. Neque gravida in fermentum et sollicitudin ac orci. Viverra nam libero justo laoreet sit amet cursus. Nunc faucibus a pellentesque sit amet porttitor eget dolor morbi. Tincidunt id
  aliquet risus feugiat in ante. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Eget velit aliquet sagittis id consectetur purus. Id aliquet lectus proin nibh nisl condimentum id venenatis. Adipiscing bibendum est ultricies integer
  quis. Congue nisi vitae suscipit tellus mauris a. Sed risus ultricies tristique nulla aliquet enim tortor at. Enim nec dui nunc mattis enim ut tellus. Mi bibendum neque egestas congue quisque egestas. Cursus risus at ultrices mi. Sed nisi lacus sed
  viverra tellus in hac habitasse. Vitae elementum curabitur vitae nunc sed.
  <br><br> Aliquet nec ullamcorper sit amet risus nullam eget. At consectetur lorem donec massa sapien faucibus et molestie. Eget egestas purus viverra accumsan in nisl. Ac tortor dignissim convallis aenean et tortor. Tortor posuere ac ut consequat semper
  viverra. Etiam non quam lacus suspendisse faucibus. Non consectetur a erat nam at lectus urna duis convallis. Tincidunt eget nullam non nisi est sit. Tellus id interdum velit laoreet. Leo a diam sollicitudin tempor id. Dui faucibus in ornare quam viverra.
  Massa tincidunt dui ut ornare lectus sit. Tellus orci ac auctor augue mauris augue neque gravida. Nunc consequat interdum varius sit amet mattis vulputate. Morbi blandit cursus risus at ultrices mi tempus. Pellentesque habitant morbi tristique senectus
  et. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Amet porttitor eget dolor morbi non arcu.
  <h2 id="Section1">Example headline</h2>
  Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Donec ac odio tempor orci. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Viverra suspendisse potenti nullam ac tortor. Fermentum posuere urna nec tincidunt
  praesent semper feugiat nibh. Est velit egestas dui id ornare arcu odio ut. Etiam erat velit scelerisque in dictum non. Nisi porta lorem mollis aliquam. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Euismod nisi porta lorem mollis
  aliquam ut. Ac feugiat sed lectus vestibulum mattis ullamcorper velit. Vulputate ut pharetra sit amet aliquam. Risus commodo viverra maecenas accumsan lacus vel facilisis. Tristique senectus et netus et malesuada fames ac turpis.
  <br><br> Suscipit tellus mauris a diam maecenas sed. Volutpat odio facilisis mauris sit amet massa vitae. Quis varius quam quisque id diam. Ac auctor augue mauris augue neque. Morbi tempus iaculis urna id volutpat lacus. Nibh ipsum consequat nisl vel
  pretium lectus quam id leo. Felis imperdiet proin fermentum leo vel. Id semper risus in hendrerit. Massa ultricies mi quis hendrerit dolor magna eget est. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Auctor neque vitae tempus quam
  pellentesque nec. Amet cursus sit amet dictum sit amet justo donec enim. Molestie a iaculis at erat pellentesque. Sed tempus urna et pharetra pharetra massa. Sapien nec sagittis aliquam malesuada.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed pulvinar proin gravida hendrerit lectus. Mauris in aliquam sem fringilla ut morbi tincidunt. Nulla at volutpat diam
  ut venenatis. Purus viverra accumsan in nisl nisi scelerisque. Neque vitae tempus quam pellentesque nec nam aliquam sem et. Habitant morbi tristique senectus et netus. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Scelerisque purus
  semper eget duis at tellus at. Arcu dui vivamus arcu felis bibendum ut. Eget mi proin sed libero enim sed faucibus turpis in. Tempor orci dapibus ultrices in iaculis nunc. Commodo elit at imperdiet dui accumsan sit. Nunc congue nisi vitae suscipit tellus
  mauris a diam. Sit amet est placerat in egestas erat imperdiet. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Ipsum dolor sit amet consectetur adipiscing elit ut. Dignissim sodales ut eu sem integer vitae justo eget. Arcu cursus
  euismod quis viverra nibh.
  <br><br> Sed odio morbi quis commodo odio aenean sed adipiscing diam. Neque gravida in fermentum et sollicitudin ac orci. Viverra nam libero justo laoreet sit amet cursus. Nunc faucibus a pellentesque sit amet porttitor eget dolor morbi. Tincidunt id
  aliquet risus feugiat in ante. Suscipit adipiscing bibendum est ultricies integer quis auctor elit. Eget velit aliquet sagittis id consectetur purus. Id aliquet lectus proin nibh nisl condimentum id venenatis. Adipiscing bibendum est ultricies integer
  quis. Congue nisi vitae suscipit tellus mauris a. Sed risus ultricies tristique nulla aliquet enim tortor at. Enim nec dui nunc mattis enim ut tellus. Mi bibendum neque egestas congue quisque egestas. Cursus risus at ultrices mi. Sed nisi lacus sed
  viverra tellus in hac habitasse. Vitae elementum curabitur vitae nunc sed.
  <br><br> Aliquet nec ullamcorper sit amet risus nullam eget. At consectetur lorem donec massa sapien faucibus et molestie. Eget egestas purus viverra accumsan in nisl. Ac tortor dignissim convallis aenean et tortor. Tortor posuere ac ut consequat semper
  viverra. Etiam non quam lacus suspendisse faucibus. Non consectetur a erat nam at lectus urna duis convallis. Tincidunt eget nullam non nisi est sit. Tellus id interdum velit laoreet. Leo a diam sollicitudin tempor id. Dui faucibus in ornare quam viverra.
  Massa tincidunt dui ut ornare lectus sit. Tellus orci ac auctor augue mauris augue neque gravida. Nunc consequat interdum varius sit amet mattis vulputate. Morbi blandit cursus risus at ultrices mi tempus. Pellentesque habitant morbi tristique senectus
  et. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Amet porttitor eget dolor morbi non arcu.
  <br><br> Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Donec ac odio tempor orci. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Viverra suspendisse potenti nullam ac tortor. Fermentum posuere urna nec
  tincidunt praesent semper feugiat nibh. Est velit egestas dui id ornare arcu odio ut. Etiam erat velit scelerisque in dictum non. Nisi porta lorem mollis aliquam. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Euismod nisi porta
  lorem mollis aliquam ut. Ac feugiat sed lectus vestibulum mattis ullamcorper velit. Vulputate ut pharetra sit amet aliquam. Risus commodo viverra maecenas accumsan lacus vel facilisis. Tristique senectus et netus et malesuada fames ac turpis.
  <br><br> Suscipit tellus mauris a diam maecenas sed. Volutpat odio facilisis mauris sit amet massa vitae. Quis varius quam quisque id diam. Ac auctor augue mauris augue neque. Morbi tempus iaculis urna id volutpat lacus. Nibh ipsum consequat nisl vel
  pretium lectus quam id leo. Felis imperdiet proin fermentum leo vel. Id semper risus in hendrerit. Massa ultricies mi quis hendrerit dolor magna eget est. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Auctor neque vitae tempus quam
  pellentesque nec. Amet cursus sit amet dictum sit amet justo donec enim. Molestie a iaculis at erat pellentesque. Sed tempus urna et pharetra pharetra massa. Sapien nec sagittis aliquam malesuada.
</div>