Home >Web Front-end >JS Tutorial >Summary of jQuery's methods for achieving smooth jump effects of anchor points within the page_jquery

Summary of jQuery's methods for achieving smooth jump effects of anchor points within the page_jquery

WBOYOriginal: 2016-05-16 15:59:561357browse

Usually when we scroll through the navigation to the content, we do it through anchor points. Just swipe and jump directly to the content without any scrolling effect. Moreover, the URL link will have a "little tail" at the end, just like #keleyi. Today I will introduce a scrolling special effect made by jquery, which can not only set the scrolling speed, but also have no "little tail" on the url link.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>jQuery实现页面内锚点平滑跳转</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="">原文</a> <a href="">JJJ</a> <a href="http://hovertree.com">HoverTree</a> <a href="/">特效库</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 implementation method:

The code only has one sentence

Copy code The code is as follows:

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

The animate() method is used to implement a set of CSS custom animations. There are two calling methods

The first form accepts 4 parameters, as shown below

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

properties – a map containing style properties and values
duration – optional speed parameter, which can be either a preset string or a millisecond value
easing – Optional easing type. jQuery only has two default types: swing and linear. To use other effects, you need to install an easing plug-in
complete – optional callback function, called when the animation ends

An example of the first form is as follows

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

The code to implement anchor point jump in this article uses the first form

$("html,body") represents animating html or body elements, that is, changing their css attribute values
scrollTop is the attribute value to be changed, which represents the distance the scroll bar slides. Here it represents the height of the html (body) hidden by the top of the browser after pulling down the browser scroll bar
$("#elementid").offset().top is the height of the html (body) that needs to be hidden by the top of the browser. It represents the absolute distance from the top of the element with the id elementid to the top of the web 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 calling form

.animate( properties, options )

One is attribute mapping and the other is option mapping. In fact, the second parameter here encapsulates the 2-4 parameters of the first form in another mapping, and adds 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
});

The above is the entire content of this article, I hope you all like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript method to switch login window by clicking on text_javascript skillsNext article：JavaScript method to switch login window by clicking on text_javascript skills

See more

Summary of jQuery's methods for achieving smooth jump effects of anchor points within the page_jquery

Related articles