I have this html markup:
<div id="main">
<p>some text</p>
<a id="goto-notes" href="#">see notes</a>
<p>some text...</p>
<div id="notes">
<p>notes here</p>
</div>
</div>
Now I would like to scroll to the div#notes when clicking a#goto-notes then add a class (seen) to the div#notes to change styling. I use jquery scrollTo before to get it done easily but now I want to know how to do this without the scrollTo or any plugin. I've done some research and this is what I got so far.
$('#goto-notes').click(function(){
$('#main').animate({scrollTop:500},'slow');
$('#notes').addClass('seen');
});
at the moment div#notes is on 500px+ below the link.
How can I auto target it without specifying 500 similar to this method in scrollTo => $('#main').scrollTo('#notes'); because I may change the text on the top some time so div#notes is not anymore at 500.
also how to addclass only when the scrolling animate is finished, because if the text is very long when animate scroll reach the div#notes the styling is already finished (I put css transition to smoothly change styling), I want the user to see the transition.
How can I auto target it without specifying 500 .... You just need to get the top position of the #notes like this: $('#notes').position().top
also how to addclass only when the scrolling animate is finished... You might wanna check the animate() API docs again, animate() has a complete: function() that is called once the animation is complete.
Here it is:
$('#goto-notes').click(function(){
var n = $('#notes);
$('#main').animate({
scrollTop: n.position().top
},{
duration: 2000,
complete: function(){
n.addClass('seen');
}
});
});
And here is the fiddle
You can use .offset() to find the top value
Use the complete callback of animate()
Try
$('#goto-notes').click(function () {
var $notes = $('#notes');
$('body').animate({
scrollTop: $notes.offset().top
}, 'slow', function () {
$notes.addClass('seen');
});
});
Demo: Fiddle
Related
I have noticed an odd behavior while using jquery's scrollTop in IE 9, 10 & 11. When the function is triggered, IE resets the page scroll position to 0, the very top, then it animates down to the correct section. I am looking for a way to have the scroll behavior match that found in other browsers where it scrolls from the current position. Here is my relevant code:
First, I bind the click event to my element:
$("body").on("click", ".marker", function() {
window.requestAnimationFrame(function() {
theAutoScrollingFunctions.scrollToTarget("city", 5000);
});
});
Then my scrolling function:
$("html,body").animate({ scrollTop: $(document).height()}, 500, function() {
// Callback stuff
});
The scrolling technically works but in IE the page is reset to the top and then scrolls. I have tried placing return false; values throughout the process but with no luck.
Has anybody else seen this issue?
I use the same animate function when doing scroll-to sections on the sites I build. When testing in IE 8+ it works perfectly. Perhaps the $(document).height() is the part that makes the reset happen at the top?
This is how I like to do it:
<ul id="section-links">
<li>Scroll to section1<li>
<li>Scroll to section2<li>
</ul>
<section id="section1">
<h1>This is the first section</h1>
</section>
<section id="section2">
<h1>Another example section</h2>
</section>
<style>
section{display:block;width:100%;min-height:300px;}
</style>
<script>
jQuery(document).ready(function($){
$('#section-links a').click(function(){
var section = $(this).attr('href');
$('html, body').animate({scrollTop:$(section).offset().top - 10}, 'slow');
});
});
</script>
As you can see, I like to add some space above the scrolled-to section, so the title and whatnot is not jammed up against the viewport.
I have not seen the bug you describe using this method.
Best of luck
The issue seemed to be with my jQuery selector.
$("html,body").animate....
Changed to
$("html").animate....
This looks to have solved the issue in IE9+ and kept consistent behavior across the other browsers I have tested.
So I have some text on a page that is hidden and when I click a button the text is revealed with a "transition.slideDownIn' and when a button is clicked the text is hidden again using a "transition.slideDownOut". The problem is that the reader is left further down the page and I want them to be brought pack up to the parent div of the text which is slid down/up, ideally animated simultaneously with the slideDownOut. I have tried several different things (queues, etc) but I can't seem to figure out what I am doing wrong. Am I approaching to problem incorrectly or misusing the functions?
Below is my most recent attempt.
$read_close.velocity('transition.slideDownOut', 1000, function() {
$('#services').velocity("scroll", {duration:1000, easing: "spring"} );
});
If what you wish to accomplish is simply scroll back up after the transition then do something like:
$read_close.velocity(
'transition.slideDownOut',
{duration: 1000,
complete: function () {
$('#services').velocity('scroll', {duration:1000, easing: "spring"});
}});
Assuming your scroll call is correct.
I have a page (that I control) that I would like it to have automatic smooth scrolling (at a controlled speed until the bottom of the page is reached).
Here is an example http://tim.theenchanter.com/2008/08/autoscroll-in-safari-firefox.html
Is there any way that could be done with jquery (not as a bookmarklet)?
This example will take 30 seconds to scroll to the bottom of the page.
start scrolling
<p> lots of content here </p>
<h2 id="bottom">bottom of page</h2>
<script>
var oneSecond = 1000;
$('a').on('click', function() {
$("html, body").animate({
scrollTop: $(document).height()
}, 30 * oneSecond);
return false;
});
</script>
You can also see
http://css-tricks.com/snippets/jquery/smooth-scrolling/
and
jQuery Scroll to bottom of page/iframe
for other examples.
lmgtfy
Sounds like you want it to be a constant speed - params aren't as explicit as that bookmarklet but you can adjust the easing type and duration to your liking.
Then it's just a matter of binding this to $(document).ready.
I have few divs .posts which have a attr data-id which corresponds to the mysql DB id.
<div class="posts" data-id="1"></div>
<div class="posts" data-id="2"></div>
Now if I want to scroll to a specific div which I am only known to the data-id.
How will I scroll to it?.
My JSFiddle is here.
Can anyone give an example along with a JSFiddle?
You use link anchors and JQuery.
Just give your link the class "scroll" and use the following code in the head:
$(function() {
// Listen for a click event on the anchor
$('.scroll').click(function(event) {
// Prevent the jump to target that is default browser behavior
event.preventDefault();
// Animate the scrollTop property of the scrollParent to the top offset
// of the target element. In this case, we have an animation duration of 1000ms(1 second).
$('html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
});
/* Just for demo purposes */
.post {
margin: 100vh 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Go To Div 8
<div class="post" id="anchor">Scroll to me</div>
You can use jQuery.ScrollTo plugin: https://github.com/flesler/jquery.scrollTo
In this link you can find demos http://demos.flesler.com/jquery/scrollTo/
$(function() {
$('body').scrollTo($('div[data-id=1]'), 1000); //scroll to div 1
});
HTML:
<div class="posts" data-id="1"></div>
You don't need javascript if you have an anchor with a name.
Div to post 8 scrolls to <a name="post8"></a>
I'm seeing a lot of jQuery and Javascript in here, and simple CSS is here to help!
html,body {
scroll-behavior: smooth;
}
To put this in action, use a link and give it an href with the id of the element you're scrolling to:
Section One
<div id="sectionOne">
<h2>Section One</h2>
</div>
Not all browsers however support the scroll-behavior property, in which case I'd recommend the selected answer near the top ;)
Animate to last item with specific attribute
$('html').animate({
scrollTop: $('className:last[data-id]').offset().top - 100
}, 500);
I think this would help $(".element").attr("any-attribute-of-ur-elem");
In your case it would look like: $(".post").attr("data-id")
And you can scrollTo that posts.
try this:
$(document).ready(function (){
$("#button").click(function (){
$('html, body').animate({
scrollTop: $(".post[data-id="+yourID+"]").offset().top
}, 2000);
});
});
I'm trying to make the window scroll to an element on click. It is working, except when the slideUp animation of one of the previous elements fires, the clicked element scrolls up way past the top.
Here's the link: http://jtwebfolio.com/mobi
NOTE: Size your browser down to mobile width to best see the issue. Also, this is taking place on the portfolio projects.
Here's the code:
$('article.project header').click(function(){
if($(this).parent().hasClass('clicked')){
// If the clicked project has already been clicked, remove the class and hide the content
$(this).parent().removeClass('clicked');
$(this).parent().find('.proj_content').slideUp('fast');
}else{
// Remove the class and slide the content up on all projects
$('article.project').removeClass('clicked');
$('article.project .proj_content').slideUp('fast');
// Add the class and show the content on the selected project
$(this).parent().addClass('clicked');
$(this).parent().find('.proj_content').slideDown('fast');
// Slide the project to the top after clicking on it
$('html, body').delay(500).animate({
scrollTop: $(this).parent().offset().top
}, 500);
}
});
If someone could help me produce the desired effect, that would be amazing. Thanks in advance!
A couple of things:
Your .slideDown()s use the speed fast, but you're only delaying by 500ms. fast is synonymous with 600ms. In general, I think it's a bad idea to use both as it's very confusing to someone reading your code what fast is.
Rather than using .delay() method, I'd use the complete argument on the slideDown or slideUps, so that once they're complete, you do your scrolling. This makes more sense, as you'd then not have to worry about conflicting timings.
My guess would be that your problem is caused by your transitions taking 600ms, but your scroll only waiting 500ms. At 500ms, it's getting the wrong offset values and scrolling to those.
Perhaps you should consider changing your markup to something like:
$(this).parent().find('.proj_content').slideDown('600', function() {
// Slide the project to the top after clicking on it
$('html, body').animate({
scrollTop: $(this).parent().offset().top
}, 500);
});
* Note: I've changed fast to 600 for clarity's sake.
try this :
$('article.project').on('click','header',function(){
_parent = $(this).parent();
if(_parent.hasClass('clicked')){
// If the clicked project has already been clicked, remove the class and hide the content
_parent.removeClass('clicked');
.find('.proj_content')
.slideUp('fast');
}else{
// Remove the class and slide the content up on all projects
$('article.project').removeClass('clicked')
.children('.proj_content')
.slideUp('fast');
// Add the class and show the content on the selected project
// Slide the project to the top after clicking on it
_parent.addClass('clicked')
.find('.proj_content')
.slideDown('fast',function(){
// callback
$('html, body').animate({ scrollTop: +(_parent.offset().top)+'px' }, 500);
});
}
});