日期:2014-05-16  浏览次数:20362 次

点击锚点链接时页面滚动的特效(Javascript Smooth Scroll)

方案一: ?简单版

?

?

原型:

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Website Vertical Scrolling with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
<script>
$(function()
{
	 $('#scollWin').click(function(){
		 $('html,body').animate({
		 scrollTop: $("#scrollToHere").offset().top
		 }, 2000);
	 })
})
</script>

<body>
<div id="scrollToHere">  Scroll to here </div>
<p style="height:1800px;">
The first draft of a law against animal abuse, aiming to protect animals from being hurt or killed in a cruel manner, was completed by a group of experts and was due to be raised for legislation in April, local media reported earlier this year.<br><br>

The proposal included jailing people who eat dog meat for up 15 days. While many Chinese enjoy rich dog meat, especially during cold winters, some object to the practice in some regions of beating dogs to death to release the blood into the meat.<br><br>

Preserved dog meat is an accepted cuisine in some parts of Guangdong province as certain breeds of dogs are raised up to 3 or 4 months old and slaughtered on farms, local media reported. Eating dog is a socially acceptable practice in parts of southern China .<br><br>

Dog meat has been a source of food in some areas of China from around 500 BC, and possibly even earlier.<br><br>

Also Read: Amazing Photos of 'Crystal Cave' in Russia [PHOTOS] <br><br>

Read related article: China proposes ban on dog meat. will South Korea follow suit?<br><br>

MUST READ: Chinese "snake town" raises over 3 million snakes for food (EXOTIC PHOTOS)

</p>
<input type="button" id="scollWin" value="Scroll up" />

    </body>
</html>

?延伸:

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Website Vertical Scrolling with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    </head>
    <body>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
        <script type="text/javascript">
            $(function() {
                $('.section a').bind('click',function(event){
                    var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    event.preventDefault();
                });
            });
        </script>

       <div class="section" id="section1">  <a href="#section2">Bottom</a> </div>
<p style="height:1800px;">
The first draft of a law against animal abuse, aiming to protect animals from being hurt or killed in a cruel manner, was completed by a group of experts and was due to be raised for legislation in April, local media reported earlier this year.<br><br>

The proposal included jailing people who eat dog meat for up 15 days. While many Chinese enjoy rich dog meat, especially during cold winters, some object to the practice in some regions of beating dogs to death to release the blood into the meat.<br><br>

Preserved dog meat is an accepted cuisine in some parts of Guangdong province as certain breeds of dogs