Snippet of Code:
HTML Markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Title</title>
</head>
<body>
<div id="intro">
<a href="#" id="showfullsite"></a>
</div>
<div id="fullsite"></div>
</body>
</html>
Using jQuery:
$("#showfullsite").click(function() {
$('html, body').animate({
scrollTop: $("#fullsite").offset().top
}, 2000);
$('html, body').css('overflow', 'auto');
$('#intro').hide(2000);
});
Simple CSS Style:
body {
overflow: hidden;
}
Greetings, I am fairly new to jQuery and require assistance. I have two div containers on my website - one for the introduction and one for the full site. I want the top #intro div to be visible initially, with the full site hidden. To achieve this, I am using overflow: hidden; to hide content beyond the screen. There is a control within the #intro div that should reveal the full site when clicked, scrolling to the #full-site section. I have applied jQuery to accomplish this, including
$('html, body').css('overflow', 'auto');$('#intro').hide(2000); to hide the intro section gradually. However, I am encountering issues where the content of #intro shifts left or right when hidden, and the scrolling effect does not directly target the desired section. How can I rectify this issue?