Home jquery How to scratch smoothly page down to a defined element?

How to scratch smoothly page down to a defined element?

Author

Date

Category

Some sources took place – did not work. It must be done on jQuery. Scrolling up I know, so I need to down and up to a certain element, better with a demo to see.


Answer 1, Authority 100%

Create an item to which you need to scribble and remember it ID:

& lt; div id = "mydiv" & gt; content & lt; / div & gt;

Next Create a link or button with an element ID where to scoff:

& lt; a href = "# mydiv" & gt; click me & lt; / a & gt;

and actually scrolling script:

$ (document) .ready (function () {
  $ ("A"). Click (function () {
    VAR ElementClick = $ (this) .attr ("href");
    var destination = $ (ElementClick) .offset (). TOP;
    if ($ .browser.safari) {
      $ ('BODY'). Animate ({ScrollTop: Destination}, 1100); // 1100 - speed
    } else {
      $ ('HTML'). Animate ({ScrollTop: Destination}, 1100);
    }
    RETURN FALSE;
  });
});

In this script, scroll works like up and down.

UPD: added full example page

& lt; html & gt;
& lt; Head & gt;
& lt; script src = "jQuery-1.7.1.min.js" Type = "Text / JavaScript" & gt; & lt; / script & gt;
& lt; script type = "text / javascript" & gt;
$ (Document) .ready (Function () {
  $ ("A"). Click (function () {
    VAR ElementClick = $ (this) .attr ("href");
    var destination = $ (ElementClick) .offset (). TOP;
    if ($ .browser.safari) {
      $ ('BODY'). Animate ({ScrollTop: Destination}, 1100); // 1100 - Scroll speed
    } else {
      $ ('HTML'). Animate ({ScrollTop: Destination}, 1100);
    }
    RETURN FALSE;
  });
});
& lt; / script & gt;
& lt; / Head & gt;
& lt; Body & gt;
& lt; a href = "# Botdiv" & gt; scroll down & lt; / a & gt;
& lt; div id = "topdiv" & gt; div & lt; / div & gt;
Content
& lt; a href = "# TOPDIV" & gt; scroll up & lt; / a & gt;
& lt; div id = "Botdiv" & gt; div & lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Answer 2, Authority 19%

Suppose you have a button at the top of the screen

& lt; div class = "email-button" & gt;
    & lt; a href = "#" class = "button" & gt;
      & lt; I class = "Letter" & gt; & lt; / i & gt;
    & lt; / a & gt;
& lt; / div & gt;

Next you need jQuery

$ (". button"). Click (Function () {
$ ("HTML, BODY"). Animate ({ScrollTop: $ ("Header"). Height () + 7200}, "Slow");
RETURN FALSE;});

In this case, the beat will be from my Header . Height in 7200 pick themselves.

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions