Smooth scrolling isn’t functioning properly when you click on the navigation menu links that lead to different sections on the same page? Below is the solution<\/p>\n\n\n\n
Will make the smooth scroll easily by using below steps <\/p>\n\n\n\n Step 2: CSS<\/strong> <\/p>\n\n\n\n Step 3: jQuery<\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n Hope this helps. Please mention in comments if any queries<\/p>\n","protected":false},"excerpt":{"rendered":" Smooth scrolling isn’t functioning properly when you click on the navigation menu links that lead to different sections on the same page? Below is the solution Will make the smooth scroll easily by using below stepsStep 1: HTML Create a straightforward one-page layout that includes internal navigation links <nav> <a href=”#about”>About<\/a> <a href=”#services”>Services<\/a> <a href=”#contact”>Contact<\/a> […]<\/p>\n","protected":false},"author":1,"featured_media":202,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,7,27],"tags":[29,31,30,28],"class_list":["post-201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-js-jquery","tag-scroll-behavior","tag-scrollintoview","tag-single-page-navigation","tag-smooth-scrolling"],"_links":{"self":[{"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/posts\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":3,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":206,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/posts\/201\/revisions\/206"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/media\/202"}],"wp:attachment":[{"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webprow.com\/blog\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Step 1: HTML <\/strong>
Create a straightforward one-page layout that includes internal navigation links
<\/p>\n\n\n\n<nav>
<a href=\"#about\">About<\/a>
<a href=\"#services\">Services<\/a>
<a href=\"#contact\">Contact<\/a>
<\/nav>
<section id=\"about\">
<h2>About Us<\/h2>
<p>Some content...<\/p>
<\/section>
<section id=\"services\">
<h2>Our Services<\/h2>
<p>More content...<\/p>
<\/section><\/pre>\n\n\n\n
<\/p>\n\n\n\n\/* style.css *\/
body <\/strong>{
font-family: sans-serif;
scroll-behavior: auto; \/* will override with jQuery *\/
}
nav {
position: fixed;
top: 0;
background: #333;
width: 100%;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
section {
height: 100vh;
padding-top: 60px;
}
<\/pre>\n\n\n\n\/\/ script.js
$(document).ready(function () {
$('nav a').click(function (e) {
e.preventDefault(); \/\/ Stop default jump
const target = $(this).attr('href'); \/\/ Get the section ID
$('html, body').animate(
{
scrollTop: $(target).offset().top
},
800 \/\/ Duration in milliseconds
);
});
});
<\/pre>\n\n\n\n