Jump to Section in page, Distance to the top page, Smooth scroll
From here jumps
<a href="#aboutme">About me</a>
to
<h3><a id="aboutme"></a>About me</h3>
This determine the destination distance from the top of the page and smooth scroll.
-
- Change the value on the line 3 for distance from the top of the page.
-
- Change the value on the line 4 scroll speed.
$('a[href*="#"]').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top - 100}, 300);
return false;
});
The complete code with HTML
<!DOCTYPE html>
<html>
<head>
<style>
#box{
float:left;
width:100%;
padding:20px;
margin:5000px 0;
background-color:silver;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a[href*="#"]').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top - 100
}, 300);
return false;
});
});
</script>
</head>
<body>
<a href="#toPoint">From here jump to point</a>
<div id="box">
<h3><a id="toPoint"></a>Point</h3>
</div>
</body>
</html>
23 Related pages
- About jQuery
- AJAX Introduction
- Copy CSS style from an element and pass it to other element, jQuery
- Dark Light Mode website, jQuery
- if the window size is bigger than 1000px do stuff. jQuery
- Include CDN jQuery
- jQuery Checkbox if else
- jQuery input radio button
- jQuery library included locally
- jQuery Limited interval
- jQuery localStorage explained
- jQuery Next and Prev element addclasses
- jQuery Radio button enable input
- jQuery Refresh the page to change the background-colour
- jQuery Screen size of this device in px
- jQuery setInterval, On page load
- jQuery Start / Stop interval
- jQuery Start interval with start button
- jquery Tick box to enable a button
- jQury plugin form validation
- Jump to Section in page, Distance to the top page, Smooth scroll
- setTimeout, jQuery
- Table Search with jQuery Misc