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
Related
I have a set of buttons on a page and when someone's clicks I want the button to expand and scroll to the top of the page (viewport height, not the actual top). This is my code -
<div class="team-header" id="brian">
<div class="teamlogo">
<img src="images/logos/wolves.png" />
<h1>Brian</h1>
</div>
</div>
<div class="brian-roster team-rosters">
<?php include ('brian.php'); ?>
</div>
<div class="team-header" id="carlos">
<div class="teamlogo">
<img src="images/logos/leverkusen.png" />
<h1>Carlos</h1>
</div>
</div>
<div class="carlos-roster team-rosters">
<?php include ('carlos.php'); ?>
</div>
There are 14 of those divs in total, that's just an example of two.
I have this jQuery code for each one -
const brianRoster = $(".brian-roster");
const brianID = $("#brian");
brianID.on("click", function () {
$("html, body").animate(
{
scrollTop: $("#brian").offset().top - 60,
},
100
);
$(brianRoster).slideToggle(700);
});
(the -60 is to compensate for a sticky header)
Right now if you click the button it expands but does not scroll to the top. If you click the button again it collapses (as it should), and then scrolls to the top.
How can I get it to scroll to the top?
try this :
$(window).scrollTop(0);
instead of
scrollTop: $("#brian").offset().top - 60,
or try
$("html, body").animate(
{
scrollTop: $("#brian").offset().top,
},
slow
);
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();
});
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.
I am trying to get some text to fade in after some images move once you reach a certain point on the page. It works fine if I am already down the page and I refresh, but when I scroll from the top to the area it does the correct animation but then the text starts to flash over and over again. Is there any way to stop this?
Here is the javascript
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 1350) {
$('#managecontent1').animate({bottom: '0px'},900);
$('#managecontent2').animate({bottom: '0px'},900,function(){
$('#twocolumntextcontainer').css("visibility","visible").hide().fadeIn('slow');
});
}
});
});
and here is the HTML
<div id="twocolumntextcontainer">
<div id="twocolumntextleft">
<p>C.M.S. <span>Wordpress</span></p>
</div>
<div id="twocolumntextright">
<p>F.T.P. <span>FileZilla</span></p>
</div>
</div>
<div class="twocolumnlayout">
<div id="managecontent1">
<img src="img/wordpresslogo_203x203.png" />
</div>
<div id="managecontent2">
<img src="img/filezillaicon_210x208.png" />
</div>
</div>
You have set conditions that will cause this.
If you take a look, you are triggering the animation every time the window scrolls and the scrollTop value is greater than 1350px. If you continue to scroll at all beyond this point, the animation will continually trigger.
You will likely want to unbind the eventListener as soon as your condition is met (assuming you don't want the animation to happen again until the page is refreshed).
Add this within your if statement:
$(this).unbind('scroll');
That will unbind the scroll listener entirely from the window once your condition is met once.
Can you try following
$(document).ready(function () {
$(window).scroll(function () {
$('#twocolumntextcontainer').fadeOut("slow");
if ($(this).scrollTop() > 1350) {
$('#managecontent1').animate({ bottom: '0px' }, 900);
$('#managecontent2').animate({ bottom: '0px' }, 900, function () {
$('#twocolumntextcontainer').fadeIn('slow');
});
}
});
});
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.