54293

How do you scroll an iframe from within using jquery?

Question:

I'm using a shadowbox which generates an iframe to display product details on a page. Because the details page can be pretty long, the client would like a "More" button that scrolls the page down (apparently the scrollbar on the right of the iframe isn't enough).

Here's the code that I've tried in order to get the iframe to scroll:

$(document).ready(function() { $(".moreButton img").click(function() { scrollbottom(); }); }); function scrollbottom() { var x = 250; // this number is a temporary placeholder var t = 500; $("iframe").animate({ scrollTop: x }, t); }

I've also tried using body instead of iframe but to no avail. Any ideas? Thanks!

Answer1:

Like this: (Tested)

$("iframe").contents().children().animate({ scrollTop: x }, t);

Answer2:

This ended up working:

$('html,body').animate({ scrollTop: x }, t);

Answer3:

In Chrome I had to specifically select the body element:

$('#my-iframe').contents().find('body').animate({scrollTop:90},500);

Answer4:

Create a function in the parent javascript like this:

function scrollToPoint(top) { $("html, body").animate({ scrollTop: top }, "slow") }

and call that function within the iframe like this:

window.parent.scrollToPoint(top);

It should work in chrome, not tested in firefox yet

Recommend

  • Cannot Write On Micro SDCard On BlackBerry
  • How can I see the full nodejs “require()” tree starting at a given file?
  • How to apply play-evolutions when running tests in play-framework?
  • (_.merge in ES6/ES7)Object.assign without overriding undefined values
  • how to create listview to a grid programmatically
  • SourceControl of ContextMenuStrip is Nothing in ToolStripMenuItem Click?
  • Android: Connect buttons with lines
  • Create ListView ScrollBar Appeared Event
  • Is it bad design to use dynamic_cast in c++
  • C++ how to read from unicode files by ignoring first character of each line
  • Pimcore where does code go
  • slide Wipe effects with ImageMagick tool and ffmpeg
  • imacros: javascript i get www._undefined_.com error
  • Qt fresh Gui application crashes on startup, faulting at QtCore4.dll
  • How to split a string into a list by digits? [duplicate]
  • ASP.NET MVC 3 ListBox validation
  • Logout user after Woocommerce Checkout
  • Planned Contrasts on glmmTMB
  • Override all shipping costs for a specific shipping class in Woocommerce
  • Laravel 5 - Cache remember doesn't work
  • SELECT on JSONField with Django
  • .htaccess redirect domain.com to www.domain.com
  • Unable to connect to Azure MySQL Database through Azure Function - C#
  • Tensorflow crash using tf.train.Saver() with GPU
  • Unable to run testNG tests from maven
  • Synchronous Calls with jqGrid?
  • Update all WooCommerce product prices to 2 decimals in database
  • Julia 1.0 UndefVarError - Scope of Variable
  • LINQ to populate treeview based upon grouping
  • Error handeling in antlr 3.0
  • Amazon Elastick BeanStalk error: Failed to create the AWS Elastic Beanstalk application version
  • Terminal run dalvikvm with am.jar
  • How to handle div that is created dynamically in a table
  • What is the best way to cache and reuse immutable singleton objects in Java?
  • Make checkout phone field optional for specific countries in WooCommerce
  • WPF custom control and direct content support
  • ReferenceError: TextEncoder is not defined
  • Create/delete users from text file using Bash script
  • Time Complexity of Fibonacci Algorithm [duplicate]
  • How to check if object is null in Java?