We Keep Coding

Target This and Class not working as expected

For some reason, as you can see in my pen, when I hover over a learn more button it adds the details class to all the cards.
I've tried with no luck :
$(this).find('element')
And :
('', this)
//slick slider
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
//tilt
$('.tilt-card').tilt({
perspective: 1000,
})
//show details
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
$(document).ready(function() {
$('button').hover(function() {
$(this).text('Read More');
}, function() {
$(this).text('Learn More');
});
});
//scroll text
$(document).ready(function() {
var count;
var interval;
$(".faction-more-btn").on('mouseover', function() {
var div = $('.description-container');
interval = setInterval(function() {
count = count || 1;
var pos = div.scrollTop();
div.scrollTop(pos + count);
}, 100);
}).click(function() {
if (count < 6) {
count = count + 1;
}
}).on('mouseout', function() {
// reset the speed on out
count = 0;
clearInterval(interval);
$(".description-container").scrollTop(0);
});
});
* {
font-family: 'Exo', sans-serif;
}
body {
background: url("https://mankindreborn.com/wp-content/uploads/2018/04/newBG.jpg");
background-size: cover;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
padding-top: 100px;
}
img {
width: 100%;
height: 400px;
padding: 5px;
}
h2 {
text-align: center;
padding-bottom: 1em;
}
.slick-dots {
text-align: center;
margin: 0 0 10px 0;
padding: 0;
li {
display: inline-block;
margin-left: 4px;
margin-right: 4px;
&.slick-active {
button {
background-color: black;
}
}
button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: #999;
border: none;
width: 15px;
height: 15px;
border-radius: 50%;
}
:hover {
background-color: black;
}
}
}
/* Custom Arrow */
.prev {
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
.next {
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
#media screen and (max-width: 800px) {
.next {
display: none !important;
}
}
/* the slides */
.slick-slide {
margin: 0 10px;
}
/* the parent */
.slick-list {
margin: 0 -10px;
}
.slide {
position: relative;
}
.tilt-card {
overflow: visible;
transform-style: preserve-3d;
}
.faction-char-img {
width: 85%;
height: auto;
transform: translateZ(30px);
overflow: visible;
}
.faction-char-con {
position: absolute;
bottom: 0px;
}
.faction-logo-con {
position: absolute;
top: 10px;
}
.faction-logo {
width: 70%;
height: auto;
transform: translateZ(20px);
overflow: visible;
float: right;
margin-right: 10px;
}
.nsm-overlay {
position: absolute;
width: 96%;
margin-left: 6px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/xBr7FM1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.foe-overlay {
position: absolute;
width: 98%;
margin-left: 3px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/tyF6AgV.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.faction-more-btn {
position: absolute;
bottom: 20px;
margin-left: 53%;
z-index: 100;
transform: translateZ(50px);
background-color: #212121cc;
border: none;
color: #585858;
padding: 10px 20px 10px;
}
.faction-more-btn:hover {
background-color: #68ddda;
color: #000;
}
.description-overlay {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 0%;
background-color: #0e0e0ef5;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
color: #fff;
padding-left: 25px;
padding-left: 25px;
}
.description-container {
margin-top: 20px;
overflow-y: scroll;
height: 185px;
padding-right: 20px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.description-container::-webkit-scrollbar {
display: none;
}
.desc-hover {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 100%;
background-color: #0e0e0ea6;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
}
.description-overlay h2 {
text-align: left;
font-size: 20px;
margin-top: 30px;
padding-right: 10px;
}
.faction-type {
color: #68ddda;
margin-top: -25px;
}
.faction-details {
font-size: 10px;
}
.foe-tower {
position: absolute;
top: 0px;
height: 100%;
width: auto;
transform: translateZ(20px);
}
.foe-logo {
margin-right: -8px;
margin-top: -9px;
}
.nsm-img {
width: 70%;
}
.nsm-logo {
margin-top: -10px;
width: 65%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/gijsroge/tilt.js/38991dd7/dest/tilt.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12 heroSlider-fixed">
<div class="overlay">
</div>
<!-- Slider -->
<div class="slider responsive">
<div class="tilt-card slide">
<img src="https://i.imgur.com/eHkER1D.jpg">
<div class="nsm-overlay"></div>
<div class="description-overlay">
<h2>NORTH STAR MINING</h2>
<p class="faction-type">MEGACORP</p>
<p class="faction-details"><b>BASED:</b> Upper Copper City, Venus, Sol.</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>One of the oldest corporations still in existence and one of the Big Three Megacorps, North Star Mining has its origins on pre-space Earth. In 2045, a former mine supervisor for SA Mines named Dawie Copper took advantage of the privatisation
of his former employers and purchased several palladium mines in South Africa. By the start of the Second Space Race in 2075, the Copper Mining Group (CMG), owned almost all of the mines in South Africa and Copper’s son Anton had taken
the reins of the company...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo nsm-logo" src="https://i.imgur.com/9GiEkjB.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img nsm-img" src="https://i.imgur.com/nOpzEfF.png">
</div>
</div>
<div class="tilt-card slide">
<img src="https://i.imgur.com/urJ0pyz.png">
<img class="foe-tower" src="https://i.imgur.com/jm9Gjvw.png">
<div class="foe-overlay"></div>
<div class="description-overlay">
<h2>FOLLOWERS OF ETERNITY</h2>
<p class="faction-type">ANARCHO-TERRORISTS</p>
<p class="faction-details"><b>BASED:</b> Unknown, speculated near New Terra</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>The slums of Earth’s Mega-Cities proved to be the perfect breeding ground for fanaticism and dissent. The Followers of Eternity have no grounded history; their origin is fragmented amongst the various slums from where they came. The faction
started life as a quasi-charity group sometime in the early 22nd century seeking to improve the lives of those who lived in the squalled urban centers; they soon realized that real change would only come through anarchy. The 'charity'
organized into street gangs and set up 'education hubs' from which their movement gained a mass following amongst the young, oppressed low entry union workers and the many forgotten who dwell at street level. The group's aim is simple,
resist the Union and their corrupt corporate masters - modeling themselves as 'enlightened anarchists' out to smash the system...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo foe-logo" src="https://i.imgur.com/y3gH30H.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img" src="https://i.imgur.com/x45t5zh.png">
</div>
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<!-- control arrows -->
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
Live version on codepen

is this what you are looking for:
$(this).closest('.tilt-card').find('.description-overlay').addClass('desc-hover');
instead of
$('.description-overlay').addClass('desc-hover');
https://codepen.io/anon/pen/zJaPbQ
Your problem is that you are adding class to all elements with css class 'description-overlay', you have to add only to the one inside current tilt-card

Working codepen.
That happens because of the hover part bellow, you're using class selector $('.description-overlay') that will select all the elements with this class and add/remove class desc-hover.
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
Should use $(this) to target the related .description-overlay div of every button :
//show details
$(".faction-more-btn").hover(
function() {
$(this).siblings(".description-overlay").addClass('desc-hover');
},
function() {
$(this).siblings(".description-overlay").removeClass('desc-hover');
}
);
NOTE : Both functions you've tried doesn't work since they look inside the current hovered button when the div is a sibling of the button, so you could use siblings() function or the combination of parent()/closest() method and find() like :
$(this).parent().find(".description-overlay");
$(this).closest('.tilt-card').find(".description-overlay");
$(this).siblings(".description-overlay")

jQuery image slider scrolls page to top when changing image

I've just started to get into jQuery, so I apologise for the bad coding in advance. I just recognised that whenever I scroll a bit down so that just a bit of the jQuery image slider is visible on the top of the page, it scrolls me automatically back to top when the jQuery image slider changes the picture. But when I am as far down on the page that the slider isn't visible at all or when I barely scroll down so that the most part of the slider is still on the screen, it doesn't scroll me back to top.
I would appreciate any help since I am not able to find the issue.
Thanks in advance.
$('#back_to_top').click(function()
{
$('html, body').animate({scrollTop: 0});
return false;
});
// Nav bar drop down code
$('#deals_a').hover(function(){
$('#deals_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#deals_dropdown').is(':hover')){
$('#deals').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#deals_dropdown').mouseleave(function(){
$('#deals_dropdown').stop(true, true).slideUp('medium');
});
};
$('#services_a').hover(function(){
$('#services_dropdown').stop(true, true).slideDown('medium');
});
if(!$('#services_dropdown').is(':hover')){
$('#services').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
} else {
$('#services_dropdown').mouseleave(function(){
$('#services_dropdown').stop(true, true).slideUp('medium');
});
};
// Slider button code
$('.slider_button').hover(function(){
$('.slider_button').removeClass('active_button');
$(this).addClass('active_button');
$('.slide').hide();
$($('#slider').children()[$(this).index()]).show();
});
// Slider code
$(document).ready(function(){
// Set options
var speed = 500; // Fade speed
var autoswitch_speed = 4000; // Auto slider speed
var myInterval = setInterval(nextSlide, autoswitch_speed);
// Add initial active class
$('.slide').first().addClass('active');
// Hide all slides
$('.slide').hide();
// Show first slide
$('.active').show();
// show the first node
($($('#slider_button_container').children()[0])).addClass('active_button');
var counter = 1;
// Switch to next slide
function nextSlide(){
clearInterval(myInterval);
$('.slider_button').removeClass('active_button');
($($('#slider_button_container').children()[counter - 1])).removeClass('active_button');
($($('#slider_button_container').children()[counter])).addClass('active_button');
$('.active').removeClass('active').addClass('oldActive');
if($('.oldActive').is(':last-child')){
$('.slide').first().addClass('active');
($($('#slider_button_container').children()[3])).removeClass('active_button');
($($('#slider_button_container').children()[0])).addClass('active_button');
counter = 0;
} else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.slide').fadeOut(speed);
$('.active').fadeIn(speed);
counter = (counter + 1) % 4;
myInterval = setInterval(nextSlide, autoswitch_speed);
}
});
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
header{
width: 100%;
height: 600px;
text-align: center;
}
#nav_menu{
height: 98px;
display: inline-block;
border-bottom: 2px solid #FFF;
padding: 0 20px 0 20px;
position: relative;
z-index: 2;
}
.nav_menu_items{
float: left;
margin: 10px;
padding-bottom: 10px;
width:auto;
line-height: 80px;
}
.nav_menu_items a{
text-decoration: none;
color: #FFF;
font-size: 20px;
font-weight: bold;
position: relative;
font-family: 'Exo 2', sans-serif;
font-style: italic;
}
.nav_menu_sup:hover::after{
content: "\25B2";
position: absolute;
left: 40%;
top: 14px;
}
#back_to_top, #back_to_top img{
position: fixed;
width: 50px;
height: 50px;
right: 50px;
bottom: 50px;
display:block;
}
.dropdown{
display:none;
height: auto;
width: auto;
font-family: 'Exo 2', sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
position: absolute;
background: #FFF;
top:100px;
line-height: 20px;
list-style-type: none;
}
.color_1{
background: #4BB7BE;
}
.color_2{
background: #2A7287;
}
.dropdown li{
padding: 10px;
;
}
.dropdown li:hover{
}
.dropdown li a{
color: #FFF;
}
.dropdown li a:hover{
color: #FFA;
}
#slider{
position: relative;
width: 100%;
height: 100%;
margin-top: -105px;
z-index: 1;
overflow: hidden;
}
.slide img{
height: 600px;
}
.darkening_layer{
width: 100%;
height: 600px;
position: absolute;
background: rgba(0, 0, 0, 0.2);
}
#slider_button_container{
position: relative;
display: inline-block;
top: -50px;
z-index: 2;
}
.slider_button{
height: 18px;
width: 18px;
border-radius: 50%;
border: 3px solid #FFF;
float: left;
z-index: 100;
margin-left: 10px;
cursor: pointer;
position: relative;
display: block;
}
.slider_button:hover{
background: #FFF;
}
.active_button{
background: #FFF;
}
#first_slider_button{
}
#welcome{
background: #007DCC;
width: 100%;
height: 400px;
}
#advertise{
background: #004E7F;
width: 100%;
height: 400px;
}
footer{
width: 100%;
height: 400px;
background-color: #007DCC;
}
.clear{
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sea Kozmetik ve Güzellik</title>
<link rel="stylesheet" style="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Exo+2" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<header>
<div id="nav_menu">
<div id="home" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ANASAYFA</a>
</div>
<div id="about" class="nav_menu_items">
<a class="nav_menu_sup" href="#">HAKKIMIZDA</a>
</div>
<div id="deals" class="nav_menu_items">
<a class="nav_menu_sup" id="deals_a" href="#">KAMPANYALAR</a>
<ul id="deals_dropdown" class="dropdown">
<li class="color_1">Öğrenci Kampanyaları</li>
<li class="color_2">Epilasyon Kampanyaları</li>
<li class="color_1">Cilt Bakımı Kampanyaları</li>
</ul>
</div>
<div id="services" class="nav_menu_items">
<a class="nav_menu_sup" id="services_a" href="#">HİZMETLERİMİZ</a>
<ul id="services_dropdown" class="dropdown">
<li class="color_1">Cilt Bakımı</li>
<li class="color_2">Depilasyon</li>
<li class="color_1">Epilasyon</li>
<li class="color_2">Manikür</li>
<li class="color_1">Pedikür</li>
<li class="color_2">Tırnak Bakımı</li>
<li class="color_1">Kaş Tasarımı</li>
<li class="color_2">Makyaj</li>
</ul>
</div>
<div id="products" class="nav_menu_items">
<a class="nav_menu_sup" href="#">ÜRÜNLERİMİZ</a>
</div>
<div id="gallery" class="nav_menu_items">
<a class="nav_menu_sup" href="#">GALERİ</a>
</div>
<div id="contact" class="nav_menu_items">
<a class="nav_menu_sup" href="#">İLETİŞİM</a>
</div>
</div>
<!-- Picture size must be 1519px x 600px -->
<div id="slider">
<div id="first_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_7.jpg" alt="">
</div>
<div id="second_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_8.jpg" alt="">
</div>
<div id="third_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_9.jpg" alt="">
</div>
<div id="fourth_slide" class="slide">
<div class="darkening_layer"></div>
<img src="images/slide_10.jpg" alt="">
</div>
</div>
<div id="slider_button_container">
<div id="first_slider_button" class="slider_button"></div>
<div id="second_slider_button" class="slider_button"></div>
<div id="third_slider_button" class="slider_button"></div>
<div id="fourth_slider_button" class="slider_button"></div>
<div class="clear"></div>
</div>
</header>
<div id="back_to_top">
<img src="images/arrow_up.png" alt="back to top">
</div>
<section id="welcome">
</section>
<section id="advertise">
</section>
<footer>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>

jQuery Fix page scrolling to top after click

Im just building a basic lightbox type plugin to suit the needs of a project im building. It basically just allows the user to click on an image on the page and the image appear in the lightbox, the problem is when i click on the close button on the lightbox,the script causes the window to shoots to the top of the page.
This is unwanted behavior because if i have been scrolling on 1000+ pictures for example i wouldnt want it to just undo all that scroll just by closing a picture.
Here is my fiddle: https://jsfiddle.net/w407wdrv/
Here is my code:
<style>
body, html {
padding: 0;
border: 0;
margin: 0;
}
.flavius-modal-bg {
display: none;
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 1;
}
.flavius-img-section {
background: rgba(255,255,255,0.8);
height: 80%;
width: 80%;
margin: 0 auto;
text-align: center;
z-index: 100;
}
.flavius-options-section {
background: white;
height: 20%;
width: 80%;
margin: 0 auto;
}
.flavius-img-preview {
position: relative;
top: 50%;
transform: translateY(-50%);
min-width: 500px;
width: 500px;
max-height: 100%;
}
</style>
<div class="flavius-modal-bg">
<div class="flavius-img-section">
<img class="flavius-img-preview" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvWoePDuMwoKkA2f6LIIgWg7nlR5wq5pJwM8DJucMvlEF94wEV" alt="">
</div>
<div class="flavius-options-section">
<a class="close-modal-bg" href="#">Close Me</a>
Some button clicked
</div>
</div>
<img src="http://s1.1zoom.me/b5050/644/Ferrari_Formula_1_f1_448686_1334x750.jpg" alt="">
<img src="https://insanelyi.com/uploads/gallery/album_102/gallery_1_102_91150.jpg" alt="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('img').on('click', function(){
var currentImg = $(this).attr('src');
$('img.flavius-img-preview').attr('src', currentImg);
$('.flavius-modal-bg').css('display', 'block');
});
$('.close-modal-bg').on('click', function(){
$scrollTop = $('body').scrollTop();
$('.flavius-modal-bg').css('display', 'none');
setScrollPosition($scrollTop);
});
function setScrollPosition($scrollTop)
{
$('body').scrollTop($scrollTop);
}
</script>

You can use javascript:void(0); to achieve your req.
Please find below working snippet
$('img').on('click', function(){
var currentImg = $(this).attr('src');
$('img.flavius-img-preview').attr('src', currentImg);
$('.flavius-modal-bg').css('display', 'block');
});
$('.close-modal-bg').on('click', function(){
$scrollTop = $('body').scrollTop();
$('.flavius-modal-bg').css('display', 'none');
setScrollPosition($scrollTop);
});
function setScrollPosition($scrollTop)
{
$('body').scrollTop($scrollTop);
}
body, html {
padding: 0;
border: 0;
margin: 0;
}
.flavius-modal-bg {
display: none;
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 1;
}
.flavius-img-section {
background: rgba(255,255,255,0.8);
height: 80%;
width: 80%;
margin: 0 auto;
text-align: center;
z-index: 100;
}
.flavius-options-section {
background: white;
height: 20%;
width: 80%;
margin: 0 auto;
}
.flavius-img-preview {
position: relative;
top: 50%;
transform: translateY(-50%);
min-width: 500px;
width: 500px;
max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="flavius-modal-bg">
<div class="flavius-img-section">
<img class="flavius-img-preview" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvWoePDuMwoKkA2f6LIIgWg7nlR5wq5pJwM8DJucMvlEF94wEV" alt="">
</div>
<div class="flavius-options-section">
<a class="close-modal-bg" href="javascript:void(0);">Close Me</a>
Some button clicked
</div>
</div>
<img src="http://s1.1zoom.me/b5050/644/Ferrari_Formula_1_f1_448686_1334x750.jpg" alt="">
<img src="https://insanelyi.com/uploads/gallery/album_102/gallery_1_102_91150.jpg" alt="">

I update your jsfiddle here https://jsfiddle.net/w407wdrv/1/
The problem is on <a class="close-modal-bg" href="#">Close Me</a>, by replacing href="#" with href="javascript:void(0);" it will prevent the page to scroll on top.

The problem is just the ash that you use for the href:
<div class="flavius-options-section">
<a class="close-modal-bg" href="#">Close Me</a>
Some button clicked
</div>
1.Remove the ash from the href of the closing anchor
<div class="flavius-options-section">
<a class="close-modal-bg">Close Me</a>
Some button clicked
</div>
2.Add a class to style the link
.close-modal-bg{
cursor:pointer;
text-decoration: underline;
color:blue;
}
$('img').on('click', function(){
var currentImg = $(this).attr('src');
$('img.flavius-img-preview').attr('src', currentImg);
$('.flavius-modal-bg').css('display', 'block');
});
$('.close-modal-bg').on('click', function(){
$scrollTop = $('body').scrollTop();
$('.flavius-modal-bg').css('display', 'none');
setScrollPosition($scrollTop);
});
function setScrollPosition($scrollTop)
{
$('body').scrollTop($scrollTop);
}
body, html {
padding: 0;
border: 0;
margin: 0;
}
.flavius-modal-bg {
display: none;
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 1;
}
.flavius-img-section {
background: rgba(255,255,255,0.8);
height: 80%;
width: 80%;
margin: 0 auto;
text-align: center;
z-index: 100;
}
.flavius-options-section {
background: white;
height: 20%;
width: 80%;
margin: 0 auto;
}
.flavius-img-preview {
position: relative;
top: 50%;
transform: translateY(-50%);
min-width: 500px;
width: 500px;
max-height: 100%;
}
.close-modal-bg{
cursor:pointer;
text-decoration: underline;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flavius-modal-bg">
<div class="flavius-img-section">
<img class="flavius-img-preview" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQvWoePDuMwoKkA2f6LIIgWg7nlR5wq5pJwM8DJucMvlEF94wEV" alt="">
</div>
<div class="flavius-options-section">
<a class="close-modal-bg">Close Me</a>
Some button clicked
</div>
</div>
<img src="http://s1.1zoom.me/b5050/644/Ferrari_Formula_1_f1_448686_1334x750.jpg" alt="">
<img src="https://insanelyi.com/uploads/gallery/album_102/gallery_1_102_91150.jpg" alt="">

change your clsoe function to this,
$('.close-modal-bg').on('click', function(e){
e.preventDefault();
$scrollTop = $('body').scrollTop();
$('.flavius-modal-bg').css('display', 'none');
setScrollPosition($scrollTop);
});
As in w3schools.com,
The event.preventDefault() method stops the default action of an element from happening.
For example:
1.Prevent a submit button from submitting a form
2.Prevent a link from following the URL
Hope this helps you.

Single page site flashes to page 1 before sliding

I have build af little "model" of a single page site i want to build.
On press on a menu item, the site slides down or up, to the page requested.
I do this by having the whole content in a wrapper, that slides up and down with a css animation, and then a javascript to change the animation, depending on where to slide from and to.
But I have this problem, that when pressing on a menu-item, the page is "flashing" to the top page quickly, before doing the animation.
My code looks like this:
index.php:
<body>
<div id="menu">
<div id="menu-ele" onclick="slide_page('p1');">P1</div>
<div id="menu-ele" onclick="slide_page('p2');">P2</div>
<div id="menu-ele" onclick="slide_page('p3');">P3</div>
<div id="menu-ele" onclick="slide_page('p4');">P4</div>
</div>
<div id="wrapper">
<div id="page1">
<div id="page-titel">Page 1</div>
</div>
<div id="page2">
<div id="page-titel">Page 2</div>
</div>
<div id="page3">
<div id="page-titel">Page 3</div>
</div>
<div id="page4">
<div id="page-titel">Page 4</div>
</div>
</div>
</body>
css:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#menu {
width: 600px;
height: 70px;
background-color: #97B6C7;
border-bottom: 4px solid #324456;
border-left: 4px solid #324456;
float: right;
border-radius: 0 0 0 8px;
}
#menu-ele {
width: 110px;
height: 30px;
padding: 20px;
color: #19284B;
font-family: Trebuchet;
font-size: 18px;
text-align: center;
float: left;
cursor: pointer;
}
#menu-ele:hover {
color: #FBFBFB;
}
#wrapper {
width: 100%;
height: 100%;
-webkit-animation-name: wrapper-slide;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
top: 0;
position:absolute;
z-index: -1;
}
#-webkit-keyframes wrapper-slide {
}
#page1 {
width: 100%;
height: 100%;
background-color: #C0595B;
}
#page2 {
width: 100%;
height: 100%;
background-color: #BCA7A8;
}
#page3 {
width: 100%;
height: 100%;
background-color: #49677A;
}
#page4 {
width: 100%;
height: 100%;
background-color: #C0A27B;
}
#page-titel {
width: 500px;
height: 60px;
font-family: Trebuchet MS;
font-size: 60px;
text-align: center;
margin: 0 auto;
padding-top: 25%;
}
js:
function findWebkitRule(rule) {
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
for (var j = 0; j < ss[i].cssRules.length; ++j) {
if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule) {
return ss[i].cssRules[j];
}
}
}
return null;
}
function change(anim, from, to) {
var keyframes = findWebkitRule(anim);
keyframes.deleteRule("0%");
keyframes.deleteRule("100%");
keyframes.insertRule("0% { top: " + from + "px; }");
keyframes.insertRule("100% { top: " + to + "%; }");
document.getElementById("wrapper").style.webkitAnimationName = anim;
document.getElementById("wrapper").style.webkitAnimationPlayState = "running";
}
function slide_page(page) {
var end = 0;
if (page == "p1") {
end = 0;
}
if (page == "p2") {
end = -100;
}
if (page == "p3") {
end = -200;
}
if (page == "p4") {
end = -300;
}
var topValue = document.getElementById("wrapper").offsetTop;
document.getElementById("wrapper").style.webkitAnimationName = "none";
document.getElementById("wrapper").style.webkitAnimationPlayState = "paused";
setTimeout(function(){
change("wrapper-slide", topValue, end);
}, 300); // <- I set this one to 300, so the flashing problem is demonstrated clearer
}
In this example, I have set the setTimeout to 300, så the problem is clearly demonstrated. Normally this would be 0, but you can still se the flash very quickly.

You can use the following snippet to convert it into a SPA.
This works in any size.
Header stays fixed.
Body shows only one frame at a time.
More important, no flickering!
$(document).ready(function () {
$(".page").css({
height: $(window).height(),
lineHeight: $(window).height() + "px"
});
$("nav a").click(function () {
theHref = $(this).attr("href");
$("html, body").animate({
scrollTop: $(theHref).offset().top
}, 500);
return false;
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
a {color: #33f; text-decoration: none;}
body {overflow: hidden;}
header {position: fixed; right: 0; top: 0;}
header nav ul {padding: 5px; background: #ccf; border-radius: 0px 0px 0px 5px;}
header nav ul li {display: inline-block;}
header nav ul li a {display: block; padding: 5px; border-radius: 5px;}
header nav ul li a:hover {background-color: #99f; color: #fff;}
.page {text-align: center;}
#page-1 {background: #99f;}
#page-2 {background: #9f9;}
#page-3 {background: #f99;}
#page-4 {background: #9cf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
<nav>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
</nav>
</header>
<section>
<div class="page" id="page-1">Page 1</div>
<div class="page" id="page-2">Page 2</div>
<div class="page" id="page-3">Page 3</div>
<div class="page" id="page-4">Page 4</div>
</section>
JSBin: http://jsbin.com/rekobofami, http://output.jsbin.com/rekobofami

Try this. Using jquery animate to slide to the relevant page.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function slide_page(page) {
$('html, body').animate({
scrollTop: $('#'+page).offset().top
}, 2000);
}
</script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#menu {
width: 600px;
height: 70px;
background-color: #97B6C7;
border-bottom: 4px solid #324456;
border-left: 4px solid #324456;
float: right;
border-radius: 0 0 0 8px;
}
#menu-ele {
width: 110px;
height: 30px;
padding: 20px;
color: #19284B;
font-family: Trebuchet;
font-size: 18px;
text-align: center;
float: left;
cursor: pointer;
}
#menu-ele:hover {
color: #FBFBFB;
}
#wrapper {
width: 100%;
height: 100%;
-webkit-animation-name: wrapper-slide;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
top: 0;
position:absolute;
z-index: -1;
}
#-webkit-keyframes wrapper-slide {
}
#page1 {
width: 100%;
height: 100%;
background-color: #C0595B;
}
#page2 {
width: 100%;
height: 100%;
background-color: #BCA7A8;
}
#page3 {
width: 100%;
height: 100%;
background-color: #49677A;
}
#page4 {
width: 100%;
height: 100%;
background-color: #C0A27B;
}
#page-titel {
width: 500px;
height: 60px;
font-family: Trebuchet MS;
font-size: 60px;
text-align: center;
margin: 0 auto;
padding-top: 25%;
}
</style>
</head>
<body>
<div id="menu">
<div id="menu-ele" onclick="slide_page('page1');">P1</div>
<div id="menu-ele" onclick="slide_page('page2');">P2</div>
<div id="menu-ele" onclick="slide_page('page3');">P3</div>
<div id="menu-ele" onclick="slide_page('page4');">P4</div>
</div>
<div id="wrapper">
<div id="page1">
<div id="page-titel">Page 1</div>
</div>
<div id="page2">
<div id="page-titel">Page 2</div>
</div>
<div id="page3">
<div id="page-titel">Page 3</div>
</div>
<div id="page4">
<div id="page-titel">Page 4</div>
</div>
</div>
</body>
</html>

place a relative div under an absolute divs generated height by window

Hey there :) I'm trying to make a video fit the browser window size plus adding an image at the bottom of the browser window height. So you get the video and the image to be the only thing that is showed when you load the page. When you scroll dowm the content of the website should appear.
I've made something to illustrate the idea: http://instagib.dk/JS-test/
The problem is when I start adding the content of the site, it appears under video and image. The problem seems to be I've made it absolute and out of the documents context.
Is there any JS, Jquery solution that reads the height of the absolute content and places content after the video?
Cheers:)
<body>
<!-- Header -->
<header class="header">
<div class="header-bg">
<div class="logo-top"></div>
</div>
<nav>
<div class="menu">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<ul class="nav-list">
<li>Projects</li>
<li>Services</li>
<li>Advantages</li>
<li>Who are we</li>
<li>Work with us</li>
</ul>
</div>
</nav>
</header>
<video class="intro" autoplay loop>
<source src="video/black_clouds.mp4" type="video/mp4">
<source src="video/black_clouds.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="intro-seperator"></div>
<!-- Main content -->
<main class="content">
</main>
<!-- Footer -->
<footer>
<small>© Crafthouse 2014</small>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
divFade = $(".header-bg");
var toggleHeader = function(noAnimate) {
var threshold = 400,
fadeLength = 300,
opacity,
scrollTop = $(document).scrollTop();
if (scrollTop < threshold) {
opacity = 0;
} else if (scrollTop > threshold + fadeLength) {
opacity = 1;
} else {
if (noAnimate) {
opacity = 1;
} else {
opacity = (scrollTop - threshold) / fadeLength;
}
}
divFade.css("opacity", opacity);
};
toggleHeader(true);
$(window).scroll(function() {
toggleHeader();
});
});
</script>
The CSS:
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/*
========================================
Layout: Header
========================================
*/
.header {
width: 100%;
height: 60px;
position: fixed;
top: 0px;
color: #fff;
z-index: 9999;
}
.header-bg {
width: 100%;
height: 60px;
line-height: 60px;
vertical-align: middle;
background: #212121;
position: absolute;
opacity: 0;
font-size: 25px;
}
.logo-top {
background: url(../images/crafthouse-top-logo.png) no-repeat;
width: 171px;
height: 60px;
margin: 0 auto;
}
.menu {
width: 70px;
height: 60px;
padding-top: 20px;
position: absolute;
left: 8%;
}
.menu:hover {
background: #000;
}
.hamburger {
width: 30px;
height: 3px;
background: #fff;
margin: 0 auto;
margin-bottom: 5px;
}
.menu:hover .hamburger {
background: #00ff91;
}
.nav-list {
width: 150px;
margin-top:20px;
background: #000;
display: none;
padding: 20px 0 10px 18px;
text-transform: uppercase;
}
.nav-list li {
margin-bottom: 10px;
}
.nav-list li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.nav-list li a:hover {
color: #00ff91;
}
.menu:hover .nav-list {
display: block;
}
.intro {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
}
.intro-seperator {
background: url(../images/seperator-brush-top.png);
height: 164px;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
}
.test {
width: 100%;
height: 100%;
background: #fff;
}
/*
========================================
Layout: Content
========================================
*/
.content {
height: 2000px;
}

Use the following for your content:
main{
position:absolute;
top:100%;
}
That moves the actual content below the video (assuming main is your content-element)