<!--... /::::::::::|::::::|:::::|\::::::\:\::::::::::::::::::||::::::::::::|:/::::::|::::|::\
... .../::::::::::::\:::::::\::::'\”-,::::\:\,:::::::::::::::|:|::::::::::,//::::::/::::|:::'|
... ../::::::::::::::'\::::::\,:::”,”,::\,”,,:::::::::/: |::::::,“//::::::/:::::/::,,-'
... ./:::::::::::::::::”,,,::\|”~,,\,:”~-\”: :”,::::/: :/:::,“: :/::,“/:::,“:::/
... /::::::::::::::::::/,__”,\: : ,,-~”,”',,: : :\:/: :/:,“,-~,”,”:/:,,“:,//'
... |:::::::::::::::::/:o:::o: :,,“/. ,“:\.|: : : : “: '”:/./,,”\.'|”/::::::|“
...|::::::/:::::::::/::/|:::|.\: : \.|'|¯;|..|.|: : : : : : : :|.||;;;|././:|:::|:::|
...|::|:::|::::::::/::'-':::'-,': : '\'\'~'_/,/: : : : : : ,: :'-'-¯-'~': |:::|:::|
...|::|:::|::::::::/::::|:::::'|: : : “' ¯: : : : : : : : : :\: : : : : : /::::'\::|
...|::|:::|:::::::/:::::|:::::'\: : : : : : : : : : : : : : :': : : : : :/::::::|::|
... \:|:::|::::::|::::::|::::::|,: : : : : : : : : :__,: : : : : : :,-“:::::::|::|
... .'\|::|::::::|::::::||::::::\'~,: : : : : : : :'--~': : : : ,,~”\:::::::::|:/
... ...'\:|:::::|::::::/.|::::::|: : “~,: : : : : : : : ,,-~,”::::::'\:::::::|:/
... ... .\\:::::|”~,/,|:::::::|: : : : ¯”~,,,,~”:::,,'\::::::::\-,,_::|/
... ... ..',\,::|~--'-~\:::::::|: : : : : : |::|,,-~”¯..__\::::::::\... .'|
... ..,~”': : \|: : : : : \::::::|: : : : : : |¯”'~~”~,”,: : \:::::::|... /
..,“: : : : : :|: : : : : :\::::::|: : : : : : \: : : : : : “~',:\::::::|\,
... ..,~”': : \|: : : : : \::::::|: : : : : : |¯”'~~”~,”,: : \:::::::|... /
..,“: : : : : :|: : : : : :\::::::|: : : : : : \: : : : : : “~',:\::::::|\,
..|: : : : : : : |: : : : : : |::::|,\,: : : : : : : : : : : : : :”,\::::|: \
..| : : : : : : : : : : : : : |::::|:'-,\: : : : : : : : : : : : : : :”-'\,|: :|
...\ : : : : : : : : : :'\: : :\:::|: : '\'\: : : : :~,,: : : : : : : : : “~-',_
... \: : : : : : : : : : :\: /:|:/: : : :',',: : : : : “,: : : : : : : : : : :,/”',
... .\: : : : : : : : : : :\|: |/: : : ,“......”,: : : :: '\: : : :  : : : : ,/....”-,
... ...\: : : : : : : : : : \: |: : .............\: : : : : |: : : : : : : ,-“........'\
... ... .\ : : : : : : : : : '\': : /..............\: : : : |: : : : : :,-“............|
... ... ...\ : : : : : : : : : '\:/.................\: : :,/: : : : : /.............../
... ... .....\ : : : : : : : : : \........................\:,-“: : : : :,/........../
... ... ... ...\ : : : : : : : : : \,..............,”======',_..................,-“
... ... ... ... \,: : : : : : : : : \: ¯”'~---~”¯: : : : : : : : : : : :: :¯”~~,'
... ... ... ... ..'\,: : : : : : : : : \: : : : : : : : : : : : : : : : : '|: : \
... ... ... ... ... .\, : : : : : : : : '\: : : : : : : : : : : : : : : : :|: : :'\
... ... ... ... ... ...\,: : : : : : : : : : : : : : : : : : : : : : : : : |: : : :|
... ... ... ... ... ... ..\ : : : : : : : : \: : : : : : : : : : : : : :: :|: : : : |
... ... ... ... ... ... ...\\,: : : : : : : , : : : : : : : : : : : : : :/: : : :: : |
... ... ... ... ... ... ... .\\ : : : : : : : :'\ : : : : : : : : : :  : : :|: : : : '|
... ... ... ... ... ... ... ./:\: : : : : : : : :'\, : : : : : : : : : : : : |: : : : :|
... ... ... ... ... ... ... /: : \: : : : : : : : : '\,: : : : : : : : : : : |: : : : :|
... ... ... ... ... ... .../: : : '\: : : : : : : : : :'\,: : : : : : : : : :|: : : : : |
... ... ... ... ... ... .../: : : '\: : : : : : : : : :'\,: : : : : : : : : :|: : : : : |
... ... ... ... ... ... ../: : : : :\: : : : : : : : : : , : : : : : : : : |: : : : : : |
... ... ... ... ... ... ,/: : : : : : :\: : : : : : : : : : '\,: : : : : : : |: : : : : |
... ... ... ... ... ..,“: : : : : : : :“,: : : : : : : : : : \: : : : : : :| : : : : : |
... ... ... ... ... ,/ : : : : : : : : : :”-, : : : : : : : : : :\: : : : : /: : : : : /
... ... ... ... ..,/ : : : : : : : : : : : : :”-, : : : : : : : : :'\: : : :| : : : : ,/
... ... ... ... ,/ : : : : : : : : : : : : : : : “-,: : : : : : : : :'\: : |: : : : : /
... ... ... .../: : : : : : : : : : : : : : : : : : “-,: : : : : : : : '\: |: : : : /
... ... ... ../: : : : : : : : : : : : : : : : : : : : :“-,: : : : : : : \,|: : : :
... ... ... ,/: : : : : : : : : : : : : : : : : : : : : : :“-,: : : : : : :\: : /'|
... ... .../,,”,,,~,,_: : : : : : : : : : : : : : : : : “-,: : : : : :'\: : :'|: |
... ... ...|',/,/:||:\,\: : : “'~,,~~---,,,_: : : : : : : : : :'\: : : : : ,: :|:||
... ... ..|: :”: ||: :”: : : : : : :”-,........ ¯¯”''~~~-----~|\: : : : : : \:|: |'\
... ... ..|: : : ||: : : : : : : : : : :”-,.......................|: : : : : : : \|: |,”
... ... ..| : : : : : : : : : : : : : : : :”-,.....................\: : : : : : : ,|.|
... ... ..| : : : : : : : : : : : : : : : :”,\....................,“\: : : : : : : : '\”
... ... ..| : : : : : : : : : : : : : : : : : :”-\...............,/: : :\: : : : : : : : ,
... ... ..| : : : : : : : : : : : : : : : : : : : \,.........,/: : : : '\: : : : : : : : : |
... ... ..| : : : : : : : : : : : : : : : : : : : : \.......,/: : : : ,-~/: : ,: : |: :/: :|
... ... ..'|: : : : : : : : : : : : : : : : : : : : : \~”¯: : : : : |: :|: : /: :/: ,/: |
... ... ...|: : : : : : : : : : : : : : : : : : : : : |: : : : : : : :”-,,/,/-~”:|”¯
... ... ...|: : : : : : : : : : : : : : : : : : : : : |: : : : : : : :-->
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>温氏效应</title>
<meta name="keywords" content="温氏效应,博客,互联网,生活,事业,音乐" />
<meta name="description" content="只想安静的做个与世无争的老男孩儿。" />
<link rel="stylesheet" type="text/css" href="https://w328.com/wp-content/themes/love328/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://w328.com/wp-content/themes/love328/js/scroll/style.css">
<link rel="stylesheet" type="text/css" href="https://w328.com/wp-content/themes/love328/js/light-images/baguetteBox.css">
<link rel="stylesheet" type="text/css" href="https://w328.com/wp-includes/css/dist/block-library/style.min.css">
<link rel="stylesheet" type="text/css" href="https://w328.com/wp-content/themes/love328/js/aplayer/APlayer.min.css">
<link rel="stylesheet" type="text/css" href="https://w328.com/wp-content/themes/love328/style.css">
<link rel="shortcut icon" href="https://w328.com/wp-content/themes/love328/favicon.ico" />
</head>
<body class="ct-sticky-sidebar">
<header class="container w328-top-box">
  <div class="w328-logo">
    <a href="https://w328.com" class="logo-pic"><img src="https://w328.com/wp-content/themes/love328/images/logo.png"></a>
    <div class="logo-title">
      <a href="https://w328.com"><p class="ex1">温氏效应</p></a>
      <p class="ex2">做你喜欢的，享·自由！~</p>
    </div>
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>   
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <div class="w328_menu"><ul id="menu-%e7%bd%91%e7%ab%99%e9%a1%b6%e9%83%a8%e5%af%bc%e8%88%aa%e8%8f%9c%e5%8d%95" class="menu"><li><a href="http://w328.com/">首页</a></li>
<li><a href="https://w328.com/category/article">乌托邦</a></li>
<li><a href="https://w328.com/category/technical_article">搞事情</a></li>
<li><a href="https://w328.com/category/share">资源分享</a></li>
</ul></div>    </div> 
  </div>
</header><div class="container">
	<div class="row">
		<div class="col-xs-12 col-sm-7 col-md-8">
							<div class="w328-box">
				<div class="wz-fenlei"><a href="https://w328.com/category/technical_article" rel="category tag">搞事情</a> / <a href="https://w328.com/category/technical_article/network_security" rel="category tag">网络安全</a></div>
				<div class="wz-biaoti"><a href="https://w328.com/219.html"><span>使用jQuery animate()动画实现锚点缓慢平滑滚动</span></a></div>
				<div class="wz-xinxi"><span class="glyphicon glyphicon-calendar"></span>&nbsp;2022年03月24日&nbsp;&nbsp;<span class="glyphicon glyphicon-user"></span>&nbsp;温氏效应&nbsp;&nbsp;<span class="wz-bianji"></span></div>
				<div class="wz-neirong">
在做页面中经常需要通过锚点来控制页面内跳转，尤其是 返回顶部，如果采用传统的 #id的方式跳转，太过于生硬，一点也不丝滑。如果使用jQuery里的animate()动画效果，可给你带来完美的缓慢平滑滚动的效果。


jQuery 效果 &#8211; animate() 方法


animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。...</div>
				<a href="https://w328.com/219.html" class="wz-quanwen" style="vertical-align:middle"><span>查看全文</span></a>
			</div>
								</div>
		    <div id="secondary" class="col-xs-12 col-sm-5 col-md-4">
      <div class="w328-box">
              <form class="w328_search_form" action="https://w328.com/" method="GET">
                <div class="w328_search_box">
                  <input type="text" class="form-control" placeholder="站内搜索" id="input-1" name="s">
                  <button type="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                  </button>
                </div>
              </form>
      </div>
      <div class="w328-box">
        <div class="w328-yiyan"><span>要我说你就是不懂呢，这种事就得给懂得人说，你不懂就不要乱说，我这么说你懂了吗。</span><p>“</p></div>
      </div>
      <meting-js class="w328_Aplayer" server="netease" type="playlist" id="5147574554"></meting-js>
      <div class="w328-box">
        <div class="w328-title">友情链接</div>
            <div class="w328-yqlink"><ul id="menu-%e5%8f%b3%e8%be%b9%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5%e8%8f%9c%e5%8d%95" class="menu"><li><a target="_blank" rel="noopener" href="https://lovemx.com/">钟爱梦欣</a></li>
<li><a target="_blank" rel="noopener" href="https://daoke.club">叨客</a></li>
<li><a target="_blank" rel="noopener" href="https://utils.fun/">油条工具箱</a></li>
</ul></div>      </div>
    </div>	</div>
</div>
<footer class="container w328-footer-box">
  <p>&copy;&nbsp;2022&nbsp;<a href="https://w328.com">温氏效应</a>&nbsp;<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022005888号</a>&nbsp;<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402012396"><img src="https://w328.com/wp-content/themes/love328/images/batb.png" style=" margin-bottom: 3px;">&nbsp;京公网安备 11011402012396号</a></p>
</footer>
<div id="moquu_wxin" class="moquu_wxin"><a href="https://w328.com"><div class="moquu_wxinh"></div></a></div>
<div id="moquu_wshare" class="moquu_wshare"><a href="javascript:void(0)"><div class="moquu_wshareh"></div></a></div>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/jquery.min.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/sidebar/custom.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/sidebar/jquery-migrate.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/sidebar/theia-sticky-sidebar.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/scroll/scroll.js"></script>
<script type="text/javascript" size="90" alpha="0.2" src="https://w328.com/wp-content/themes/love328/js/bg/ribbon.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/logo-title.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/light-images/baguetteBox.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/light-images/highlight.min.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/aplayer/APlayer.min.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/aplayer/Meting.min.js"></script>
<script type="text/javascript" src="https://w328.com/wp-content/themes/love328/js/w328.js"></script>
<script>
window.onload = function() {
    baguetteBox.run('.baguetteBoxThree', {
        animation: 'fadeIn',
        noScrollbars: true
    });
    if (typeof oldIE === 'undefined' && Object.keys) {
        hljs.initHighlighting();
    }
    var year = document.getElementById('year');
    year.innerText = new Date().getFullYear();
};
</script>
</body>
</html>