Display Section Vertically Middle of the Screen in One-Page or Single Page Website

Recently, I was searching for exact for which can bring me an output that shows the particular one section of my website in vertically middle of the screen.

Problem is not show the section in vertically middle of the screen but the problem is quit different.

Actully, I want to show the section perfectly visible to middle of the screen like including Heading, Introduction Para Section Options and Call to Action of the Section but with very short line of code.

I had search for it for a very long but I couldn’t find anything suitable but meanwhile i found some piece of code on which i need to work and that lead me the Exact output.

Code of Java Script :

<!– Code for Interlinking inside the page with proper vertically middle align of the Screen –>

var headerHeight = $(“div.header”).height(); // with this code we will get the value of header section
// Attach the click event
$(‘a[href*=#]’).bind(“click”, function(e) {
e.preventDefault();

var target = $(this).attr(“href”); //Get the target
var scrollToPosition = $(target).offset().top – headerHeight – 100; //here 100 represent the margin from header section

$(‘html’).animate({ ‘scrollTop’: scrollToPosition }, 1000, function(){ //here 1000 represent the smooth scroll speed for the page
window.location.hash = “” + target;
// This hash change will jump the page to the top of the div with the same id
// so we need to force the page to back to the end of the animation
$(‘html’).animate({ ‘scrollTop’: scrollToPosition }, 0);
});

$(‘body’).append(“called”);
}); 

 

I hope it will work for your requirements with small changes as per your outpur requirements.

Thanks for Reading. 😉

Comments are most welcome, let’s make good code for bright outputs.

(y)