jQuery实现平滑滚动页面到指定锚点链接的方法

本文实例讲述了jQuery实现平滑滚动页面到指定锚点链接的方法。分享给大家供大家参考。具体如下：

$.fn.scroller

=

function()

{

var

speed

=

'slow'

//

Choose

default

speed

$(this).each(function()

{

$(this).bind('click',

function()

{

var

target

=

$(this).attr('href')

//

Get

scroll

target

$(target).ScrollTo(speed)

return

false

})

})

}

希望本文所述对大家的jquery程序设计有所帮助。

方法/步骤 1、首先我们需要打开Deaweaver软件，新建一个html5文件，并保存下来。 2、我们需要引用Jquery Mobile的css样式表文件，还有jquery.js以及jquery-mobile的js文件，并且将页面调为响应式文件。 3、接下来我们需要新建几个div标签，并为其添加属性data-role="page" 4、这时我们可以按下F12，在浏览器中进行页面的浏览。页面中之后第一个div。 5、之所以只有第一个div是因为，我将所有的div都添加了data-role="page"属性，这样每一个div都是一个jquery mobile页面了。而Jquery Mobile框架式默认的只显示第一个页面。虽然他们都在一个html文档中。 6、我们需要为第一个div加上链接，以实现和其他页面之间的跳转，这个的前提是要给其他div添加一个id属性。 7、最后，我们需要给每个页面分别添加锚记链接，以实现多个页面互相跳转。

$(function(){

  $(".click").click(function(){

    $(window).scrollTop(0)

  })

})//这个是直接跳转到顶部

$(function(){

  $(".click").click(function(){

    $("html,body").animate({scrollTop:0},500)

  })

})//这个是缓慢返回顶部的效果

前面需要引入jq库，click是点击的那个标签

---