call div and put it in center of page? - javascript

I want to jump to a destination <div> using href in html. I am using the id of the <div> to call the <div> and successfully jump.
Here is my code.
<a href='#idx'>click here</a>
|
|
|
|
<div id="idx">test scroll up</div>
But the position of the <div> is always in the top of the page if it's called.
I want the position of the <div> in the center of the page, when <div> called even click...how do I achieve that, using javascript maybe?
thanks..

For every screen height,
Check here DEMO http://jsfiddle.net/yeyene/J3zyq/1/
JQUERY
$(document).ready(function() {
$('a#gotoID').click(function() {
var id_offset = ($(window).height() - $('#idx').height())/2;
$('html, body').animate({
scrollTop: ($("#idx").offset().top - (id_offset/1.5))
}, 800);
});
});

<a id="idx-link">click here</a>
js:
$('a#idx-link').click(function() {
$('html, body').animate({
scrollTop: ($("#idx").offset().top - 200)
}, 800);
});
Change 200 appropriately based on where you want the div to be after the animation.

Related

Animate while move to a new section in a same page in js

$('#skip-intro').on("click", function() {
var header = $('.navbar').innerHeight();
$("html, body").animate({
scrollTop: $('#intro').offset().top - header
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get to Know
<div class="section-block" id="intro">
----content------
</div>
Here, Help me find out why animation property is not working while moving down to the below section.
Original here: Find it here (But it's in german)
$('a[href*="#"]').on('click',function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Href
<div style="height:1000px; background:red;"></div>
<div id="exp" style="background:green; text-align:center;">jdaslkasd</div>
Please use it like this.
<header class = 'navbar'>test</header>
Get to Know
<div class="section-block" id="intro" style = "margin-top: 300px;">
----content------
</div>
Script
<script>
$(document).ready(function() {
$('#skip-intro').on("click", function(){
var header = $('.navbar').innerHeight();
console.log(parseInt($('#intro').offset().top) - parseInt(header))
$("html, body").animate({ scrollTop: parseInt($('#intro').offset().top) - parseInt(header) }, 1000);
});
});
</script>
Please note in order to scroll animate to a certain div position it should be within that position for scroll to work, as per your html your div section block is already on top so it won't animate as it's currently visible on that position.

Smooth scroll except on specific class but fontawesome icon doesn't work

I have this script to smooth scroll to the anchor of a link where I don't want that links of images with fancybox are affected:
/*======================================
= SCROLL TO ANCHOR =
======================================*/
$(document).on('click', 'a', function(event){
if (!$(event.target).hasClass('fancybox')) {
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
}
});
This is the HTML structure of the image link:
<div class="grid-item grid-item--big">
<div class="gallery-image">
<i class="icons fa fa-eye"></i>
<div class="bg"></div>
</div>
</div>
The script works everywhere on the page, and also over the image, when I click it the script does it job and no scroll is fired and fancybox image is opened as expected; except when I click on the font-awesome icon. In that case nothing happens.
Maybe I should edit my script, but how?
Any suggestion would be really appreciated! Thanks in advance.
I've solved using a new class and assigned it only to elements that I want to scroll to.
$(document).on('click', 'a', function(event){
if ($(event.target).hasClass('btn-book-tour') || $(event.target).hasClass('scrollto')) {
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
}
});

How to calculate the lower limit of a div and scroll to the next div?

I'm trying to scroll to the next div when the current div almost came to its lower limit.
I'm using the jQuery plugin MouseWheel. The following code that I have, run the animation scrollTop when I scroll. But not when it reaches a certain desired point that would be its lower limit. Because, some div contain a lot of text with images.
This is the structure HTML
<html>
[...]
<body>
<div id="main">
<div class="item">
[Only a Image]
<!-- Only a Img? I'm 2px distance to the next div OK, ScrollTop When Scroll1 -->
</div>
<div class="item">
[Some Text]
<!-- mmmm Some text. Ok, I let you read this.. Scroll 1.. Scroll 2.. Scroll 3..
Wait! I'm 40px distance to the next div ... scrollTop -->
</div>
<div class="item">
[Some text with Image]
<!-- mmmm Some text with Image. Ok, I let you read this.. Scroll 1.. Scroll 2.. Scroll 3.. Scroll 4... Scroll 5.. Scroll 6..
Wait! I'm 40px distance to the next div ... scrollTop -->
</div>
<div class="item">
[....]
</div>
</div>
</body>
</html>
This is the JS:
$('#main').on('mousewheel', '.item', function(e) {
if (e.deltaY < 0) {
$('html, body').animate({
scrollTop: $(e.currentTarget).next().offset().top
}, 1000);
} else {
$('html, body').animate({
scrollTop: $(e.currentTarget).prev().offset().top
}, 1000);
}
e.preventDefault();
});
Add the hight of the element to the offset
$('#main').on('mousewheel', '.item', function(e) {
if ($(document).scrollTop() >= $(e.currentTarget).offset().top+$(e.currentTarget).height();) {
$('html, body').animate({
scrollTop: $(e.currentTarget).next().offset().top;
}, 1000);
}
e.preventDefault();
});

On click, bring element to the top of the window (with offset)

I want to click this button, which is a section head of an accordion and have it move to the top of page (based on window)
I feel like this is simple --- but it was a long day. Any ideas?
Some background is that this is an accordion like thing - and the buttons are headers. Because the accordion is long - and the phone screen is small --- when you fold and open... you can end up in some random middle area of a section and I'm trying to get that section to move to the top instead of a hash... I've tried a few hash ideas, but I'll also need an if statement to avoid this happening on larger screens. I hope that is clear. Thanks. OH and HERE is a fiddle
HTML
<div class="some-div"></div>
<div class="some-div"></div>
<button>button to endup up at top</button>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<div class="some-div"></div>
<button>button to endup up at top</button>
javascript
$('button').on('click', function() {
$(this). go-to-the-top-with-an-offset-of-10px();
});
With this, you can move at the top of the page ("based on window"):
$('button').click(function() { // on button click
$("html, body").animate({ // catch the `html, body`
scrollTop:0 // make their `scrollTop` property 0, to go at the top
}, 1000); // in 1000 ms (1 second)
});
DEMO
Or if you want to move up by an offset of 10px, use:
$('button').click(function () { // on button click
$("html, body").animate({ // catch the `html, body`
scrollTop: $(this).offset().top - 10 // button's offset - 10
}, 1000); // in 1000 ms (1 second)
});
DEMO
Or let's say you want to bring the 8th div to the top on click, use:
$('button').click(function () { // on button click
$("html, body").animate({ // catch the `html, body`
scrollTop: $("div:nth-of-type(8)").offset().top // 8th div's top offset
}, 1000); // in 1000 ms (1 second)
});
DEMO

javascript / Jquery .slideToggle - page does not scroll with content

I am using .slideToggle - Jquery to create an accordion and It works so far.
However, When div#slickbox goes down or up the page does not scroll with it. The page maintain scroll position.
I have 2 huge images(700px x 1300px) inside div#slickbox.
I want to scroll the page with the content, down & up.
How can I do this?
Thank you!
jquery
$('#slickbox').hide();
$('.more a').click(function() {
$('#slickbox').slideToggle(3200);
return false;
});
HTML
<div id="slickbox">
<div id="slide_show">
<div id="slider">
<ul>
<li>
<img alt="figure 1" src="images/fig1.jpg" width="700" height="1300">
</div><!-- End slide_show -->
</div><!-- End slickbox -->
<div class="donate done">
<h3 class="more"> More </h3>
</div> <!-- End button-->
You can store the .height() of the #slickbox element then use that as the animation for scrollTop, like this:
var height = $('#slickbox').hide().height();
$('.more a').toggle(function() {
$('#slickbox').slideDown(3200);
$('html, body').animate({ scrollTop: '+=' + height }, 3200);
return false;
}, function() {
$('#slickbox').slideUp(3200);
$('html, body').animate({ scrollTop: '-=' + height }, 3200);
return false;
});​
You can give it a try here, this will cause the page to scroll down the same number of pixels it expanded because of the images, and at the same rate since it has the same duration.

Categories