We Keep Coding

Jquery scroll to closest element with .class

The problem
I have my html page, i am using a search engine like "Ctrl+F" created by me, i integrated a jquery plugin which highlights me all the result i searched for, and it adds the class ".highlight" to the elements it highlights, the thing is i want to scroll between them , each time i press the search button.
I tried this but it didn't work:
$(document).ready(function () {
$("#btnSearch").on("click", function () {
$('html, body').animate({
'scrollTop': $(this).closest(".highlight").position().top
});
});
});

Maybe this helps you...
$(document).ready(function () {
$("#btnSearch").on("click", function () {
$('html, body').animate({
'scrollTop': $(this).closest(".highlight").parent().scrollTop()+ $(this).closest(".highlight").offset().top - $(this).closest(".highlight").parent().offset().top,
});
});
});

scrollTo a div once a button is clicked?

I'm trying to get the page to scroll to #news .section-wrap when .paging-navigation a is clicked. I tried inserting the line (as seen below) but couldn't get it to work. Where am I going wrong?
$('#article-list').on('click', '.paging-navigation a', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('#article-list').scrollTo('#news .section-wrap'); // this is the line I added
$('#article-list').fadeOut(500, function(){
$(this).load(link + ' #article-list', function() {
$(this).find('#article-list > *').unwrap().end().fadeIn(500);
});
});
});

You will need to animate html and body and point to the selector within the jQuery animate function. Try this:
$('html, body').animate({
scrollTop: $('#news .section-wrap').offset().top
}, 2000);

Try something like this:
$(".paging-navigation a").click(function(){
$('html, body').animate({
scrollTop: $("#news .section-wrap").offset().top
}, 500);
});
You might need to alter something in this code, either timing or some bug since i could not test it currently.
Hope it is helpful.

scrollTo() is not a native jQuery method. You can use a third part plugin like http://lions-mark.com/jquery/scrollTo/ or http://demos.flesler.com/jquery/scrollTo/ .
As answered on jQuery scroll to element you can also make the page scroll to the target position, like this:
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});

Scroll down window when toggle open

Hi I am working on a site where I have created "Toggle section" under the footer, but the problem is when the toggle opens the window does not scroll to the that toggled section that's why peoples can't see it. What I want is when the toggle open window should scroll to that section automatically when click toggle button to open it.
Here is the Js code that I have been using;
<script>
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#ticket-content').toggle('show');
});
});
</script>
And the website is here; Click here for website
Hope to have any help soon.
Thanks in advance.

Try this. I might help you.
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#ticket-content').toggle('show',function() {
jQuery('html, body').animate({
scrollTop: jQuery(this).offset().top
}, 2000);
});
});
});

Try:
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#ticket-content').toggle(function(){
jQuery('html, body').animate({
scrollTop: jQuery(this).offset().top
}, 2000);
});
});
});

changing window.load scrollTop animation speed based on page

I've setup my site to scroll past a mandatory header element by using a scrollTop to a certain div function. I specifically set it to scroll slow so that the user "knows the header is up there" but on subsequent pages, I'd rather it just start at that scrolled position.
I'm trying to use a simple if / else statement to grab the wordpress page (is_home) and set the animation to 1200, else set the animation to 0. I've even gone in and setup a custom field on the page of is_home and True. But it's still not working. Any ideas how to fix the if / else or suggestions for a better way to implement this?
if (is_home()) {
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 1200);
});
} else {
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 0);
})
}

Well, if(is_home()) is a php statement from the WordPress API, which isn't available in JS. You could include different script calls based on this, but it's rather bad practice in my opinion.
Make sure the below is executed after your plugin, and jquery obviously. Good place might be after wp_footer()
<?php
if (is_home()) { ?>
<script>
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 1200);
});
</script>
<?php } else { ?>
<script>
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 0);
});
</script>
<?php } ?>

You are combining php and JavaScript together. is_home() is a PHP statement
You need to rewrite your code as below:
<?php
if (is_home()) {
?>
<script type="text/javascript">
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 1200);
});
</script>
<?php
} else {
?>
<script type="text/javascript">
$(window).load(function () {
$('html, body').animate({
scrollTop: $("#grey").offset().top
}, 0);
});
</script>
<?php
}
?>
Also use jQuery instead of $ to avoid conflict any other JavaScript libraries

Screen not scrolling down when using JQuery slidetoggle()

I have a site where there is a called .slidingDiv which when the anchor .show_hide is clicked it appears and slides down which is great when it's the only content on the page.
If there is other content above this div it doesn't scroll down and show. Instead it shows the div but it is out of site, so it does actually work but not push the rest of the content up.
Here's the JQuery:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle(), 1000;
scrollTop: $(this).offset().top
});
});
</script>
Many thanks
Pete

Setting scrollTop in the callback of the slideToggle function or after the slideToggle function has been called (as you have did) results in jumpy behavior, at best. If you are looking for a smooth animation it is best to initiate the slide then animate the page to scroll down. This is demonstrated by this fiddle. Here is the js:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
$(".slidingDiv").slideToggle(1000);
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top + $('window').height()
}, 2000);
});
});​

Just make a check before scrollTop
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click',function(){
$(".slidingDiv").slideToggle(function(){
if($('.slidingDiv').height() > 0) {
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top
}, 1000);
}
});
});
});
</script>