Develop Reference

Offset <a> href = id

When I click on <a class="Navigation" id="WorldHeader" href="#WorldTitle">Go to World</a>, my window put directly the div with the id directly on top. Is there a way to offset the window position when I click on the tag? My header is hiding the content, but I want to keep it.

Solution
Assuming based on the JQuery tag that, and using the reference of #WebMarie, the following solution must help you:
$('#WorldHeader').on('click', function(event) {
event.preventDefault(); // Prevent the default <a> action.
let myOffset = 50; // Pixels.
let newScrollPosition = $("#WorldTitle").offset().top - myOffset;
$('html, body').scrollTop(newScrollPosition); // Set the current vertical position of the scroll bar.
});
With animation:
$('#WorldHeader').on('click', function(event) {
event.preventDefault();
let myOffset = 50; // Pixels.
let animationDuration = 1000; // Miliseconds.
let newScrollPosition = $("#WorldTitle").offset().top - myOffset;
$('html, body').animate({
scrollTop: newScrollPosition // Set the current vertical position of the scroll bar.
}, animationDuration);
});
Example of use
$('#WorldHeader').on('click', function(event) {
event.preventDefault();
let myOffset = 50; // Pixels.
let animationDuration = 1000; // Miliseconds.
let newScrollPosition = $("#WorldTitle").offset().top - myOffset;
$('html, body').animate({
scrollTop: newScrollPosition // Set the current vertical position of the scroll bar.
}, animationDuration);
});
#WorldTitle {
margin: 20px 0;
width: 100%;
height: 150px;
background-color: red;
}
.blue {
width: 100%;
height: 500px;
background-color: blue;
}
.green {
width: 100%;
height: 500px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="Navigation" id="WorldHeader" href="#WorldTitle">Go to World</a>
<div class="blue"></div>
<div id="WorldTitle"></div>
<div class="green"></div>

Jquery scrolltop with prev next not scrolling properly

I'm trying to setup jquery scrolltop with previous and next button, so that the user can scroll within a scrollable div.
I came across this post LINK and was trying to setup for my application, but it doesn't seems to scroll to the top of the next/previous div.
Could anyone point out where the problem is and perhaps a solution to it? Any input would be appreciated, thanks.
CSS:
.image_holder {
display: block;
height: 100%;
}
.section{
position: relative;
height: 80vh;
background: rgba(255, 226, 57, 0.0);
overflow-y: scroll;
margin: 0 auto;
border: #000000 solid thin;
}
HTML:
<div class="page_scroller">
<ul >
<li class="list-unstyled col-lg-6 bg-primary">Up</li>
<li class="list-unstyled col-lg-6 bg-primary">Down</li>
</ul>
</div>
<div class="section" >
<div id="highlight-1" class="current image_holder">A</div>
<div id="highlight-2" class="image_holder ">B</div>
<div id="highlight-3" class="image_holder ">C</div>
<div id="highlight-4" class="image_holder ">D</div>
</div>
Jquery:
var scrollTo = function(element) {
console.log(element);
$('.section').animate({
scrollTop: element.offset().top
}, 500);
}
$('.next').click(function(event) {
event.preventDefault();
var $current = $('.section > .image_holder.current');
var $next = $current.next().first();
if ($next.length!=0) {
$current.removeClass('current')
$next.addClass('current');
scrollTo($next);
}
});
$('.prev').click(function(event) {
event.preventDefault();
var $current = $('.section > .image_holder.current');
var $prev = $current.prev().first();
if ($prev.length!=0) {
$current.removeClass('current')
$prev.addClass('current');
scrollTo($prev);
}
});
My JSFiddle

I think it's actually working as intended: it scrolls to the section, but it scrolls based on the top edge of the viewport, not based on the overflowed div.
Try replacing
$('.section').animate({
scrollTop: element.offset().top
}, 500);
with
$('.section').animate({
scrollTop: element.position().top
}, 500);

Scroll lock last section

I'm trying to make a website where the penultimate section takes a fixed position and the last one goes over. However, the goal is for the last section to never be halfway through. To do this, after the penultima section is in a fixed position, I detect if the scroll comes from above. If it comes, at a certain point the page scrolls to the bottom. I'm having problems here because when the page does do the animation of scrolling the last section gets stuck. Can you help me?
function fixe_section(scrollTopPx){
if(scrollTopPx>$('.section2').offset().top){
$('.section2 div').css({'position':'fixed', 'bottom':'0', 'z-index':'-1'});
}
else{
$('.section2 div').css({'position':'static', 'z-index':'0'});
}
}
$(window).scroll(function(event){
scrollTopPx = $(window).scrollTop();
fixe_section(scrollTopPx);
});
section_move();
function section_move(){
var start_mov = $('.section2').offset().top+$('.section2').height()/2;
var move_to = $('.section3').offset().top+$('.section3').height();
var lastScrollTop = 0;
$(window).scroll(function () {
var st = $(this).scrollTop();
if(st>lastScrollTop){
if(st>start_mov){
$("html, body").animate({
scrollTop: move_to
}, 600);
return false;
}
}
lastScrollTop = st;
});
}
section {
width: 100%;
height: 600px;
position: relative;
}
section div{
width: 100%;
height: 100%;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section1">
<div class="green"></div>
</section>
<section class="section2">
<div class="red">TESTING</div>
</section>
<section class="section3">
<div class="blue"></div>
</section>

How do I simulate smooth scroll using jquery?

I'm trying to simulate scroll using jquery and I technically can, It just feels really rough and awkward.
JS:
$(document).ready(function(){
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta / 120 > 0) {
movePage();
}
});
var page1top = 0;
function movePage() {
page1top = page1top - 1;
// page1 is the page that i want to move up when people scroll down.
$('#page1').css('top': page1top + '%');
}
});
HTML:
<div id='container'>
<div id='page1'></div>
</div>
CSS:
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
z-index: -100;
}
#page1 {
width: 100%;
height: 500%;
z-index: 0;
}
I'm just wondering how I would make this smooth. No plugins please, thanks.

You're looking for jquery animate. Check fiddle for demonstration.
$('.to-target').click(function(){
$('html, body').animate({
scrollTop: $("#target").offset().top
});
});
.box {
width: 100vw;
height: 100vh;
}
.long {
background-color: aqua;
}
.short {
background-color: beige;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div class="long box">
<button class="to-target">Go to Target</button>
</div>
<div id="target" class="short box">
</div>
</div>

Replace .css() with .animate() and scroll to the selector you want smoothly:
$target = $('#someEl');
$('html, body').animate({
scrollTop: $target.offset().top
}, 200);

multiple Buttons opens up same action but different ID container

I have multiple Buttons (12 at the moment), all have the same id with following letter.
each btn fire up a same function but different ID container.
here is the HTML:
<!----the btnS-->
<div id="projectA"></div>
<div id="projectB"></div>
<div id="projectC"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
<div id="closeA">
<p class="text">close</p>
</div>
</div>
<div class="content_projectB">this is content B!!!!
<div id="closeB">
<p class="text">close</p>
</div>
</div>
<div class="content_projectC">this is content C!!!!
<div id="closeC">
<p class="text">close</p>
</div>
</div>
I have a code that working but it contains more than 500 lines...
here is the JS:
$(document).ready(function () {
$("#projectA").on("click", function () {
$(".content_projectA").slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$("#closeA").on("click", function () {
$(".content_projectA").hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
//---- B -------//
$(document).ready(function () {
$("#projectB").on("click", function () {
$(".content_projectB").slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$("#closeB").on("click", function () {
$(".content_projectB").hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
//---- C -------//
$(document).ready(function () {
$("#projectC").on("click", function () {
$(".content_projectC").slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$("#closeC").on("click", function () {
$(".content_projectC").hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
I am looking for a way to short it up.
here is the code on fiddle- http://jsfiddle.net/mirifarr/6j060L2k/
Many thanks

please have a look here:
http://jsfiddle.net/6j060L2k/4/
<!----the btnS-->
<div class="project" id="projectA"></div>
<div class="project" id="projectB"></div>
<div class="project" id="projectC"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
<div id="closeA">
<p id="A" class="close text">close</p>
</div>
</div>
<div class="content_projectB">this is content B!!!!
<div id="closeB">
<p id="B" class="close text">close</p>
</div>
</div>
<div class="content_projectC">this is content C!!!!
<div id="closeC">
<p id="C" class=" close text">close</p>
</div>
</div>
JS:
$(document).ready(function () {
$(".project").on("click", function () {
$(".content_"+$(this).attr('id')).slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$(".close").on("click", function () {
//$(".content_projectA").hide();
$(".content_project"+$(this).attr('id')).hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});

Use following Jquery selector
Selector On Starts With
And Update your JS code like:
$(document).ready(function () {
//// Project
$("[id^='project']").click(function () {
var char = $(this).attr('id').substring(7);
$(".content_project" + char).slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
///// Close Div
$("[id^='close']").click(function () {
var char = $(this).attr('id').substring(5);
$(".content_project" + char).hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
Check Updated Fiddle

Use jQuery starts with selector ^. Retrieve the last character of the clicked div and use to scroll to target div.
$("[id^=project]").on("click", function () {
var id = this.id,
letter = id.substr(id.length - 1);
});
Use the letter to target div with class content_project. Do the same for close button/div.
The fiddle looks better than code snippet below.
$(document).ready(function () {
$("[id^=project]").on("click", function () {
var id = this.id,
letter = id.substr(id.length - 1);
$(".content_project" + letter).slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
});
$("[id^=close]").on("click", function () {
var id = this.id,
letter = id.substr(id.length - 1);
$(".content_project" + letter).hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
});
#projectA {
width: 200px;
height: 200px;
background-color: #0f36ca;
cursor: pointer;
}
#projectB {
width: 200px;
height: 200px;
background-color: #0ff5ca;
cursor: pointer;
}
#projectC {
width: 200px;
height: 200px;
background-color: #6f36ca;
cursor: pointer;
}
.content_projectA {
width: 100%;
height: 100%;
position: absolute;
background-color: #0f36ca;
display: none;
}
.content_projectB {
width: 100%;
height: 100%;
position: absolute;
background-color: #0ff5ca;
display: none;
}
.content_projectC {
width: 100%;
height: 100%;
position: absolute;
background-color: #6f36ca;
display: none;
}
.text {
color: #fff;
margin: auto;
}
#closeA {
width: 100px;
height: 100px;
position: absolute;
background-color: #000;
cursor: pointer;
}
#closeB {
width: 100px;
height: 100px;
background-color: #000;
cursor: pointer;
}
#closeC {
width: 100px;
height: 100px;
background-color: #000;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!----the btnS-->
<div id="projectA"></div>
<div id="projectB"></div>
<div id="projectC"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
<div id="closeA">
<p class="text">close</p>
</div>
</div>
<div class="content_projectB">this is content B!!!!
<div id="closeB">
<p class="text">close</p>
</div>
</div>
<div class="content_projectC">this is content C!!!!
<div id="closeC">
<p class="text">close</p>
</div>
</div>

Well, I didn't change the CSS, so i won't post it again.
js:
function openContents(classChar) {
//this don't need to be inside an onclick event because this event is already triggered when accessing this function
$(".content_project"+classChar).slideDown();
$('html,body').animate({
scrollTop: 300
}, 200);
//this one continues to bind the event to the close div
$("#close"+classChar).on("click", function () {
$(".content_project"+classChar).hide();
$('html,body').animate({
scrollTop: 200
}, 400);
});
}
//on document ready, execute init()
function init() {
/*
* What I did here was bind a click event to all three divs, using a class to identify them, instead of picking one by one.
* Then store id value of clicked div in a variable and sending the last char as parameter to openContents function.
*/
$(".projects").on("click",function() {
var idValue = $(this).attr('id');
openContents(idValue.substr(idValue.length-1));
});
}
$(document).ready(init);
html (just added classes):
<!----the btnS-->
<div id="projectA" class="projects"></div>
<div id="projectB" class="projects"></div>
<div id="projectC" class="projects"></div>
<!--- The ContentS--->
<div class="content_projectA">this is content A!!!!
<div id="closeA">
<p class="text">close</p>
</div>
</div>
<div class="content_projectB">this is content B!!!!
<div id="closeB">
<p class="text">close</p>
</div>
</div>
<div class="content_projectC">this is content C!!!!
<div id="closeC">
<p class="text">close</p>
</div>
</div>
http://jsfiddle.net/6j060L2k/9/