澳门威尼斯人注册网址【官网首页】
做最好的网站

jQuery实现锚点向下平滑滚动特效,jQuery实现锚点向下平滑滚动特效示例

来源:http://www.ogcoffee123.com 作者: 计算机网络 人气:167 发布时间:2019-11-17
摘要:jQuery完毕锚点向下平滑滚动特效示例 兑现效果与利益: 贯彻原理: 动用jQuery animate()方法完毕页面平滑滚动特效 $('html, body').animate({scrollTop: $(hash).offset().top}, 800, function(){window.location.

jQuery完毕锚点向下平滑滚动特效示例

兑现效果与利益:

图片 1

贯彻原理:

动用jQuery animate()方法完毕页面平滑滚动特效

$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});

粗略实例代码:

<!DOCTYPE html>
<html>
<head>
<scriptsrc="/uploads/allimg/191117/13043L923-1.jpg"></script>
<script>
$(document).ready(function(){
 // Add smooth scrolling to all links
 $("a").on('click', function(event) {

  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
   // Prevent default anchor click behavior
   event.preventDefault();

   // Store hash
   var hash = this.hash;

   // Using jQuery's animate() method to add smooth page scroll
   // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
   $('html, body').animate({
    scrollTop: $(hash).offset().top
   }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
   });
  } // End if
 });
});
</script>
 <style>
body, html, .main {
  height: 100%;
}

section {
  min-height: 100%;
}
</style>
</head>
<body>
<ahref="#section2"rel="external nofollow"style="
   font-size: 30px;
   font-weight: bold;
   text-align: center;
">点击此处平滑滚动到第二部分</a>
<divclass="main">
 <section></section>
</div>
<divclass="main"id="section2">
 <sectionstyle="
   background-color: #03c03c;
   color: #fff;
   font-size: 30px;
   text-align: center">
   SECTION 2
 </section>
</div>
</body>
</html>

达成效果与利益: 达成原理: 使用jQuery animate()方法达成页面平滑滚动特效 $('html, body').animate({scrollTop: $(ha...

jQuery达成锚点向下平滑滚动特效

平常我们做导航滚动到情节都以经过锚点来做,刷的弹指就一贯跳到内容了,未有一丝的轮转效应,並且url 链接最终会有“小尾巴”,就疑似#keleyi,今日自身就介绍后生可畏款 jquery 做的轮转的特效,不仅可以够设置滚动速度,又足以在 url 链接上未有“小尾巴”。

落时间效益果与利益:

<!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>

图片 2

更简便点的得以实现格局:

 

代码只有一句话

贯彻原理:

复制代码 代码如下:

  使用jQuery animate()方法完成页面平滑滚动特效

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

$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});

animate()方法用来兑现生龙活虎组css的自定义动漫,有二种调用方法

 

第大器晚成种样式选取4个参数,如下所示

轻便易行实例代码:

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

<!DOCTYPE html>
<html>
<head>
<script src="/uploads/allimg/191117/13043L923-1.jpg"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>
 <style>
body, html, .main {
    height: 100%;
}

section {
    min-height: 100%;
}
</style>
</head>
<body>
<a href="#section2" style="
      font-size: 30px;
      font-weight: bold;
      text-align: center;
">点击此处平滑滚动到第二部分</a>
<div class="main">
  <section></section>
</div>
<div class="main" id="section2">
  <section style="
      background-color: #03c03c;
      color: #fff;
      font-size: 30px;
      text-align: center">
      SECTION 2
  </section>
</div>
</body>
</html>

properties – 叁个饱含样式属性及值的照射
duration – 可选的进程参数,不仅能够是预置的字符串,也能够是一个皮秒数值
easing – 可选的缓动类型,jquery私下认可的唯有三种:swing和linear,要选取其余作用供给安装缓动类的插件
complete – 可选的回调函数,在动漫截止时被调用

  

第生机勃勃种样式的身体力行如下

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

正文达成锚点跳转的代码应用了第后生可畏种样式

$("html,body")代表对html或body成分进行动漫,即要改造他们的css属性值
scrollTop是要转移的属性值,表示滚动条滑过的离开,在这里边代表向下推动浏览器滚动条后html(body)被浏览器顶部遮盖的冲天
$("#elementid").offset().top就是html(body)须要被浏览器最上部隐蔽的可观,它象征id为elementid的要素顶部到网页顶上部分(不是浏览器可视区域上方卡塔尔国的相对化间距。
1000是指动画时间为1秒

animate()方法还会有第二种调用格局

.animate( properties, options )

三个是性质映射,二个是采取映射。实际上这里的第一个参数是把第生龙活虎种样式的第2-4个参数封装在另二个辉映中,同有的时候候又增加了三个筛选。第三种样式的代码如下:

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

如上所述就是本文的全体内容了,希望大家能够赏识。

你只怕感兴趣的稿子:

  • JQuery轻便贯彻锚点链接的平整滚动
  • jQuery完毕平滑滚动到钦点锚点的方法
  • JQuery 实今后同风姿罗曼蒂克页面锚点链接之间的平缓滚动
  • jquery怎样达成锚点链接之间的坦荡滚动
  • jQuery落成平滑滚动页面到钦定锚点链接的不二等秘书技
  • jQuery完毕锚点向下平滑滚动特效示例

本文由澳门威尼斯人注册网址发布于 计算机网络,转载请注明出处:jQuery实现锚点向下平滑滚动特效,jQuery实现锚点向下平滑滚动特效示例

关键词:

最火资讯