The perfect way to achieve page scrolling (Scroll) effect with jQuery

Many bloggers have written/reprinted the method of using jQuery to achieve the page scrolling (Scroll) effect in the past, but most of the methods found so far have a small bug under Opera: use jump directly And the screen flickers.

Today, the super low-key expert Willin shared a perfect method to solve the bug of jQuery implementing scrolling effect under Opera. I then debug+applied it to my current theme and it has been tested. It's perfect, I posted the code to illustrate it.

Because I don’t know much about js and jQuery is only superficial. I can’t explain the principle clearly. I can only explain the modification method.

Demo: Click "Δ" at the bottom of the current topic zOM/"x comments" "" below the title of the article page Leave a comment”

Assumption: The top id of your topic is header, and the bottom “return to top” id is top

jQuery code is as follows:

document$

 windowopera ? documentcompatMode   ? $ $ $

$
scrollTop $top 
 false

Instructions: See comments directly

$('#top ').click(function(){...}); This is the basic code for scrolling. You can adapt it according to your own situation, that is, draw inferences from one example. For example, since you can return to the top, you can scroll to the bottom or scroll to a certain point. An id, scroll to the middle...

Then I will post an example of scrolling to the "comment box":

The premise of the example is: there is a below the article title "Add comment", the original html is as follows

<p id="add-comment"><a href="#respond"></a></p>

(Note: #respond is the id of the comment box)

Then $('#top').click(function(){.. .}); This code becomes as follows:

$
scrollTop $top 
 false

That’s it, isn’t it simple? Some friends say the principle, go and learn jQ

For more methods, go to Willin's "Several Methods of Page Scroll"

Statement: This article adopts BY-NC- Authorized under SA agreement | ZWWoOoOo
Please indicate that the reprint is from "The perfect method to achieve page scrolling (Scroll) effect with jQuery"

Read the full text
Category:Javascript View comments

The above is the detailed content of The perfect way to achieve page scrolling (Scroll) effect with jQuery. For more information, please follow other related articles on the PHP Chinese website!