Solved

How to scroll to middle of page (with jquery)

Posted on 2014-04-29
4
2,677 Views
Last Modified: 2014-04-29
Hello experts
I 'm using a function to add a new div onclick loading the content with an ajax call.
The problem is that i cant scroll the new div to the middle of the page.
Below my code.
Any help to fix this?
// JavaScript Document
 $('#adddiv').live('click', function () {
   $.ajax({
     type: "POST",
     url: "thisfunction.cfc?returnformat=json",
     data: {
       method: 'fgetinstruction'
     },
     success: function (f) {
       var formattedResponse = $.parseJSON(f);
       if (jQuery.isArray(formattedResponse) === true) {
         var success = formattedResponse[0]['success'];
         var content = formattedResponse[0]['content'];
         var newid = formattedResponse[0]['newid'];
         if (success === true) {
           $(content).appendTo(instruc);
           $('#' + newid).scrolltocenter();
           return false;
         }
       }
     }
   }, "json")
 });
 jQuery.fn.scrolltocenter = function () {
   var scrollto = this.offset().top + (this.height() / 2);
   this.animate({
     scrollTop: scrollto
   });
   return this;
 }

Open in new window

0
Comment
Question by:Panos
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40029220
Firstup consider changing .live() to .on() - the former is being deprecated.

Secondly - set your dataType : 'json' - that way you won't have to use this line

var formattedResponse = $.parseJSON(f);

As you have it at the moment is the method used for .post() i.e. to add the 'json' parameter after the definition of the callback.

For .ajax use
type: "POST",
     url: "thisfunction.cfc?returnformat=json",
     data: {
       method: 'fgetinstruction'
     },
     dataType: 'json',
     success: 
...
}

Open in new window

Then to your actual problem
1. You need to subtract from offset top not add
2. The value you need to subtract is half the difference between the window height and the height of your div
3. Finally - you need to scroll the body not the div
Here is some code that should do what you want
 jQuery.fn.scrolltocenter = function () {
   var scrollto = this.offset().top - (($(window).height() - this.height())/ 2);
   $('html,body').animate({
     scrollTop: scrollto
   });
   return this;
 }

Open in new window

0
 
LVL 2

Author Comment

by:Panos
ID: 40029234
Hi  julianH
Thank you for your correction and the great help.
It is working fine
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 40029235
Thank you
regards
panos
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 40029398
You are welcome - thanks for the points.
0

Featured Post

Linux Academy Android App Now Supports Chromecast

We have some fantastic news for our Android fans. We’re so excited to announce that the Linux Academy Android app is now available with Chromecast support. That’s right – simply download the latest update of the Linux Academy App and start casting your favorite course videos!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question