Summary of jQuery's method to achieve smooth jump effect of anchor points in page

  • 2020-06-07 04:02:20
  • OfStack

We do at ordinary times navigation scroll to content is done by the anchor, 1 just jump straight to the content of the brush, no 1 silk scroll effect, and url link finally there will be a "little tail", like # keleyi, today I will introduce 1 jquery do rolling effects, can set up the rolling speed, and can not on url link "little tail".


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery Achieve a smooth jump of anchor points in the page </title><base target="_blank" /> 
<style type="text/css"> 
#hovertree { 
height: 800px; 
background: red; 
text-align:center;color:white; 
} 
 
#keleyi { 
height: 800px; 
background: green;text-align:center;color:white; 
} 
 
#myslider { 
height: 800px; 
background: black;text-align:center;color:white; 
} 
 
#zonemenu { 
height: 800px; 
background: yellow;text-align:center; 
} 
 
.keleyilink{position:fixed;} 
.keleyilink a {text-decoration:none;} 
</style> 
</head> 
<body> 
<div class="keleyilink"> 
<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a> 
<a href="javascript:scroll('keleyi');" target="_self">KKK</a> 
<a href="javascript:scroll('myslider');" target="_self">myslider</a> 
<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a> 
</div> 
<div id="hovertree">hovertree 
<br /><br /><br /><a href=""> The original </a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/"> Special effects library </a> 
</div> 
<div id="keleyi">jb51</div> 
<div id="myslider">myslider</div> 
<div id="zonemenu">zonemenu</div> 
<script src="jquery/jquery-1.11.3.min.js"></script> 
<script src="jquery.hovertreescroll.js"></script> 
<script> 
function scroll(id) { 
$("#" + id).HoverTreeScroll(1000); 
} 
</script> 
</body> 
</html>

A simpler way to do it:

The code only has 1 sentence


$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000);

The animate() method is used to implement a set of css's custom animations. There are two invocation methods

The first form takes four parameters, as shown below

.animate( properties [, duration] [, easing] [, complete] )

properties? 1 map that contains style properties and values
duration. The optional speed parameter can be either a preset string or 1 millisecond value
easing � optional slow type, jquery default have only two: swing and linear, need to install to use other effect slow class plug-in
The complete optional callback function is called at the end of the animation

An example of the first form is shown below


.animate({property1: 'value1', property2: 'value2'},
    speed, easing, function() {
      alert('The animation is finished.');
    });

The code that implements the anchor jump in this article USES the first form

$("html,body") represents the animation of an html or body element, changing their css attribute value
scrollTop is the property value to be changed, indicating how far the scroll bar has slid, in this case the height at which html (body) is hidden by the top of the browser after the browser scroll bar is pulled down
$("#elementid").offset().top is the height at which html (body) needs to be hidden from the top of the browser. It represents the absolute distance from the top of the element id to the top of the page (not the top of the browser's visible area).
1000 means the animation time is 1 second

The animate() method also has a second form of invocation

.animate( properties, options )

One is an attribute mapping and one is an option mapping. The second parameter here actually encapsulates the first form of the 2-4 parameters in another map, adding two options. The code for the second form is as follows:


.animate({
  property1: 'value1',
  property2: 'value2'
}, {
  duration: 'value',
  easing: 'value',
  complete: function(){
    alert('The animation is finished.');
  },
  queue: boolen,
  step: callback
});

This is the end of this article, I hope you enjoy it.


Related articles: