jquery smooth scroll incorrect resultIs there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?Scroll to the top of the page using JavaScript/jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?List bullets like 1) 2) 3)
Casting Goblin Matron with Plague Engineer on the battlefield
Looking for a new job because of relocation - is it okay to tell the real reason?
How to avoid ci-driven development..?
What is the German idiom or expression for when someone is being hypocritical against their own teachings?
Did silent film actors actually say their lines or did they simply improvise “dialogue” while being filmed?
Would the Elder Wand have been able to destroy a Horcrux?
Could one become a successful researcher by writing some really good papers while being outside academia?
Best way to explain to my boss that I cannot attend a team summit because it is on Rosh Hashana or any other Jewish Holiday
What does VB stand for?
How can I tell if a flight itinerary is fake
Can I say "if a sequence is not bounded above, then it is divergent to positive infinity" without explicitly saying it's eventually increasing?
Unexpected route on a flight from USA to Europe
Does it make sense to occupy open space?
Finish the Mastermind
Why should I "believe in" weak solutions to PDEs?
Does this put me at risk for identity theft?
Did Apollo leave poop on the moon?
Why do private jets such as Gulfstream fly higher than other civilian jets?
What can make Linux unresponsive for minutes when browsing certain websites?
"How do you solve a problem like Maria?"
Is it true that control+alt+delete only became a thing because IBM would not build Bill Gates a computer with a task manager button?
How would a family travel from Indiana to Texas in 1911?
Does the Voyager team use a wrapper (Fortran(77?) to Python) to transmit current commands?
How is the return type of a ternary operator determined?
jquery smooth scroll incorrect result
Is there an “exists” function for jQuery?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How can I know which radio button is selected via jQuery?How to check whether a checkbox is checked in jQuery?Scroll to the top of the page using JavaScript/jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?List bullets like 1) 2) 3)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
1
I'm try to make smooth scrolling
but scrollbar not work as expect result it seem like smooth scrolling and default jump to # work on same time
here is my HTML (boot strap nav)
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
here my js
<script>
$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top - (navHeight + 1),
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);
</script>
and content of page
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
When I click link on nav for first time it's scroll nav bar over content header (make my header disapear)
but when I click same link again it's scroll up for a little and display as my expect result
So. Anyone know how to fix this problem to make scroll work correct at first time click
Thank you.
javascript jquery html css bootstrap-4
edited Mar 27 at 5:52
Hiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
asked Mar 27 at 5:48
Chanom FirstChanom First
8999 silver badges18 bronze badges
add a comment |
1
I'm try to make smooth scrolling
but scrollbar not work as expect result it seem like smooth scrolling and default jump to # work on same time
here is my HTML (boot strap nav)
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
here my js
<script>
$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top - (navHeight + 1),
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);
</script>
and content of page
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
When I click link on nav for first time it's scroll nav bar over content header (make my header disapear)
but when I click same link again it's scroll up for a little and display as my expect result
So. Anyone know how to fix this problem to make scroll work correct at first time click
Thank you.
javascript jquery html css bootstrap-4
edited Mar 27 at 5:52
Hiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
asked Mar 27 at 5:48
Chanom FirstChanom First
8999 silver badges18 bronze badges
add a comment |
1
1
1
I'm try to make smooth scrolling
but scrollbar not work as expect result it seem like smooth scrolling and default jump to # work on same time
here is my HTML (boot strap nav)
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
here my js
<script>
$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top - (navHeight + 1),
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);
</script>
and content of page
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
When I click link on nav for first time it's scroll nav bar over content header (make my header disapear)
but when I click same link again it's scroll up for a little and display as my expect result
So. Anyone know how to fix this problem to make scroll work correct at first time click
Thank you.
javascript jquery html css bootstrap-4
edited Mar 27 at 5:52
Hiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
asked Mar 27 at 5:48
Chanom FirstChanom First
8999 silver badges18 bronze badges
I'm try to make smooth scrolling
but scrollbar not work as expect result it seem like smooth scrolling and default jump to # work on same time
here is my HTML (boot strap nav)
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
here my js
<script>
$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top - (navHeight + 1),
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);
</script>
and content of page
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
When I click link on nav for first time it's scroll nav bar over content header (make my header disapear)
but when I click same link again it's scroll up for a little and display as my expect result
So. Anyone know how to fix this problem to make scroll work correct at first time click
Thank you.
javascript jquery html css bootstrap-4
javascript jquery html css bootstrap-4
edited Mar 27 at 5:52
Hiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
asked Mar 27 at 5:48
Chanom FirstChanom First
8999 silver badges18 bronze badges
edited Mar 27 at 5:52
Hiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
asked Mar 27 at 5:48
Chanom FirstChanom First
8999 silver badges18 bronze badges
edited Mar 27 at 5:52
Hiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
edited Mar 27 at 5:52
Hiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
edited Mar 27 at 5:52
Hiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
4,6361 gold badge6 silver badges22 bronze badges
asked Mar 27 at 5:48
Chanom FirstChanom First
8999 silver badges18 bronze badges
asked Mar 27 at 5:48
Chanom FirstChanom First
8999 silver badges18 bronze badges
asked Mar 27 at 5:48
Chanom FirstChanom First
8999 silver badges18 bronze badges
8999 silver badges18 bronze badges
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
2
Here is your code with change, add padding-top:52px; to section element and remove - (navHeight + 1) from $(hash).offset().top.
$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top,
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);section
min-height:500px;
padding-top:52px;
#main-nav
position:fixed;
width:100%;
top:0px;
background:#ffffff;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>answered Mar 27 at 6:14
Hiren VaghasiyaHiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
add a comment |
0
https://codepen.io/Vikaspatel/pen/jJZOYQ
please check this might be you get some help...
function div_slider()
$('ul li a').on('click', function(e)
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate(
scrollTop: attrval.offset().top
, 1000)
);
answered Mar 27 at 5:58
Vikas PatelVikas Patel
1221 silver badge9 bronze badges
add a comment |
0
You can use this bellow code to make easing scrollspy easily and very smoothly
<ul class="navigation clearfix">
<li class=" "><a class="js-scroll-trigger nav-link" href="#home">Home</a></li>
<li><a class="js-scroll-trigger nav-link" href="#about">About Us</a></li>
<li><a class="js-scroll-trigger nav-link" href="#amenities">Amenities</a></li>
<li><a class="js-scroll-trigger nav-link" href="#plan">Floor Plan</a></li>
<li><a class="js-scroll-trigger nav-link" href="#location">Location</a></li>
<li><a class="js-scroll-trigger nav-link" href="#contact">Contact Us</a></li>
</ul>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script> (function ($)
"use strict";
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function ()
$('a.js-scroll-trigger').removeClass('active')
$(this).addClass('active');
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
$('html, body').animate( scrollTop: (target.offset().top - 72) , 1000, "easeInOutExpo");
return false;
);
)(jQuery);
</script>
answered Mar 27 at 6:29
shahirshahir
13 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55370570%2fjquery-smooth-scroll-incorrect-result%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Here is your code with change, add padding-top:52px; to section element and remove - (navHeight + 1) from $(hash).offset().top.
$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top,
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);section
min-height:500px;
padding-top:52px;
#main-nav
position:fixed;
width:100%;
top:0px;
background:#ffffff;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>answered Mar 27 at 6:14
Hiren VaghasiyaHiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
add a comment |
2
Here is your code with change, add padding-top:52px; to section element and remove - (navHeight + 1) from $(hash).offset().top.
$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top,
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);section
min-height:500px;
padding-top:52px;
#main-nav
position:fixed;
width:100%;
top:0px;
background:#ffffff;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>answered Mar 27 at 6:14
Hiren VaghasiyaHiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
add a comment |
2
2
2
Here is your code with change, add padding-top:52px; to section element and remove - (navHeight + 1) from $(hash).offset().top.
$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top,
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);section
min-height:500px;
padding-top:52px;
#main-nav
position:fixed;
width:100%;
top:0px;
background:#ffffff;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>answered Mar 27 at 6:14
Hiren VaghasiyaHiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
Here is your code with change, add padding-top:52px; to section element and remove - (navHeight + 1) from $(hash).offset().top.
$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top,
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);section
min-height:500px;
padding-top:52px;
#main-nav
position:fixed;
width:100%;
top:0px;
background:#ffffff;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top,
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);section
min-height:500px;
padding-top:52px;
#main-nav
position:fixed;
width:100%;
top:0px;
background:#ffffff;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>$('body').scrollspy(
target: '#main-nav',
offset: $('#main-nav').outerHeight()
);
// add smooth scrolling
$('#main-nav a').on('click',(event) =>
const sender = event.target; // sender
// check for a hash value
if (sender.hash)
// prevent default behaviour
event.preventDefault();
// get sendar hash
const hash = sender.hash;
const navHeight = $('#main-nav').outerHeight();
// animate smooth scroll
$('html').animate(
scrollTop: $(hash).offset().top,
,1500,() =>
// add hash to URL after scroll
this.location.hash = hash;
);
);section
min-height:500px;
padding-top:52px;
#main-nav
position:fixed;
width:100%;
top:0px;
background:#ffffff;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#welcome">Welcome</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
</ul>
</div>
</nav>
<section id="welcome">
<h3>Welcome</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="about">
<h3>About</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>
<section id="services">
<h3>Services</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
</p>
</section>answered Mar 27 at 6:14
Hiren VaghasiyaHiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
answered Mar 27 at 6:14
Hiren VaghasiyaHiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
answered Mar 27 at 6:14
Hiren VaghasiyaHiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
answered Mar 27 at 6:14
Hiren VaghasiyaHiren Vaghasiya
4,6361 gold badge6 silver badges22 bronze badges
4,6361 gold badge6 silver badges22 bronze badges
add a comment |
add a comment |
0
https://codepen.io/Vikaspatel/pen/jJZOYQ
please check this might be you get some help...
function div_slider()
$('ul li a').on('click', function(e)
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate(
scrollTop: attrval.offset().top
, 1000)
);
answered Mar 27 at 5:58
Vikas PatelVikas Patel
1221 silver badge9 bronze badges
add a comment |
0
https://codepen.io/Vikaspatel/pen/jJZOYQ
please check this might be you get some help...
function div_slider()
$('ul li a').on('click', function(e)
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate(
scrollTop: attrval.offset().top
, 1000)
);
answered Mar 27 at 5:58
Vikas PatelVikas Patel
1221 silver badge9 bronze badges
add a comment |
0
0
0
https://codepen.io/Vikaspatel/pen/jJZOYQ
please check this might be you get some help...
function div_slider()
$('ul li a').on('click', function(e)
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate(
scrollTop: attrval.offset().top
, 1000)
);
answered Mar 27 at 5:58
Vikas PatelVikas Patel
1221 silver badge9 bronze badges
https://codepen.io/Vikaspatel/pen/jJZOYQ
please check this might be you get some help...
function div_slider()
$('ul li a').on('click', function(e)
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate(
scrollTop: attrval.offset().top
, 1000)
);
function div_slider()
$('ul li a').on('click', function(e)
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate(
scrollTop: attrval.offset().top
, 1000)
);
function div_slider()
$('ul li a').on('click', function(e)
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate(
scrollTop: attrval.offset().top
, 1000)
);
answered Mar 27 at 5:58
Vikas PatelVikas Patel
1221 silver badge9 bronze badges
answered Mar 27 at 5:58
Vikas PatelVikas Patel
1221 silver badge9 bronze badges
answered Mar 27 at 5:58
Vikas PatelVikas Patel
1221 silver badge9 bronze badges
answered Mar 27 at 5:58
Vikas PatelVikas Patel
1221 silver badge9 bronze badges
1221 silver badge9 bronze badges
add a comment |
add a comment |
0
You can use this bellow code to make easing scrollspy easily and very smoothly
<ul class="navigation clearfix">
<li class=" "><a class="js-scroll-trigger nav-link" href="#home">Home</a></li>
<li><a class="js-scroll-trigger nav-link" href="#about">About Us</a></li>
<li><a class="js-scroll-trigger nav-link" href="#amenities">Amenities</a></li>
<li><a class="js-scroll-trigger nav-link" href="#plan">Floor Plan</a></li>
<li><a class="js-scroll-trigger nav-link" href="#location">Location</a></li>
<li><a class="js-scroll-trigger nav-link" href="#contact">Contact Us</a></li>
</ul>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script> (function ($)
"use strict";
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function ()
$('a.js-scroll-trigger').removeClass('active')
$(this).addClass('active');
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
$('html, body').animate( scrollTop: (target.offset().top - 72) , 1000, "easeInOutExpo");
return false;
);
)(jQuery);
</script>
answered Mar 27 at 6:29
shahirshahir
13 bronze badges
add a comment |
0
You can use this bellow code to make easing scrollspy easily and very smoothly
<ul class="navigation clearfix">
<li class=" "><a class="js-scroll-trigger nav-link" href="#home">Home</a></li>
<li><a class="js-scroll-trigger nav-link" href="#about">About Us</a></li>
<li><a class="js-scroll-trigger nav-link" href="#amenities">Amenities</a></li>
<li><a class="js-scroll-trigger nav-link" href="#plan">Floor Plan</a></li>
<li><a class="js-scroll-trigger nav-link" href="#location">Location</a></li>
<li><a class="js-scroll-trigger nav-link" href="#contact">Contact Us</a></li>
</ul>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script> (function ($)
"use strict";
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function ()
$('a.js-scroll-trigger').removeClass('active')
$(this).addClass('active');
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
$('html, body').animate( scrollTop: (target.offset().top - 72) , 1000, "easeInOutExpo");
return false;
);
)(jQuery);
</script>
answered Mar 27 at 6:29
shahirshahir
13 bronze badges
add a comment |
0
0
0
You can use this bellow code to make easing scrollspy easily and very smoothly
<ul class="navigation clearfix">
<li class=" "><a class="js-scroll-trigger nav-link" href="#home">Home</a></li>
<li><a class="js-scroll-trigger nav-link" href="#about">About Us</a></li>
<li><a class="js-scroll-trigger nav-link" href="#amenities">Amenities</a></li>
<li><a class="js-scroll-trigger nav-link" href="#plan">Floor Plan</a></li>
<li><a class="js-scroll-trigger nav-link" href="#location">Location</a></li>
<li><a class="js-scroll-trigger nav-link" href="#contact">Contact Us</a></li>
</ul>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script> (function ($)
"use strict";
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function ()
$('a.js-scroll-trigger').removeClass('active')
$(this).addClass('active');
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
$('html, body').animate( scrollTop: (target.offset().top - 72) , 1000, "easeInOutExpo");
return false;
);
)(jQuery);
</script>
answered Mar 27 at 6:29
shahirshahir
13 bronze badges
You can use this bellow code to make easing scrollspy easily and very smoothly
<ul class="navigation clearfix">
<li class=" "><a class="js-scroll-trigger nav-link" href="#home">Home</a></li>
<li><a class="js-scroll-trigger nav-link" href="#about">About Us</a></li>
<li><a class="js-scroll-trigger nav-link" href="#amenities">Amenities</a></li>
<li><a class="js-scroll-trigger nav-link" href="#plan">Floor Plan</a></li>
<li><a class="js-scroll-trigger nav-link" href="#location">Location</a></li>
<li><a class="js-scroll-trigger nav-link" href="#contact">Contact Us</a></li>
</ul>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script> (function ($)
"use strict";
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function ()
$('a.js-scroll-trigger').removeClass('active')
$(this).addClass('active');
if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname)
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length)
$('html, body').animate( scrollTop: (target.offset().top - 72) , 1000, "easeInOutExpo");
return false;
);
)(jQuery);
</script>
answered Mar 27 at 6:29
shahirshahir
13 bronze badges
answered Mar 27 at 6:29
shahirshahir
13 bronze badges
answered Mar 27 at 6:29
shahirshahir
13 bronze badges
answered Mar 27 at 6:29
shahirshahir
13 bronze badges
13 bronze badges
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55370570%2fjquery-smooth-scroll-incorrect-result%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
