html 结构: <div class="container"> <div class="content"></div> </div>

里面既没有 设置锚点的代码. 也没有返回顶端的链接.. 这难不倒 jquery.

$(function () {
    var topPosition = "<div id='top'></div>"; 
    //定义顶部锚点的标签, 原来可以不用在html里面定义的...
    var goToTopButton = "<p id='goToTop'><a href='#top'><span></span></a></p>"; 
    //定义按钮标签.
    $("div.container").prepend(topPosition); //在container的div最前面加上锚点标签
    $("div.container").append(goToTopButton); //在container的div最后面加上按钮标签
    $("#goToTop").hide(); //首先将#goToTop隐藏
    //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $("#goToTop").fadeIn(1500);
            } else {
                $("#goToTop").fadeOut(1500);
            }
        }); //当点击跳转链接后,回到页面顶部位置
        $("#goToTop").click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    });
});

个把网站很长. 右下角最好设置个. 回到顶部的按钮.

常见方法:

  • 使用jQuery scrollTo()
  • 使用锚点链接.
  • 使用js函数 scrollTo()
  • 使用js操作 DOM

jQuery

 $("#contentDiv").scrollTop(0);

就这么简单….

使用锚点链接

毫无疑问,使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接,然后我们在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置。

<!-- 定义一个名称为top的锚点链接 -->
<a name="top"></a>

<!-- 这里是网页主体内容,此处省略 -->


<!-- 返回页面顶部top锚点的链接 -->
<a href="#top">返回顶部</a>

使用 js 函数 scrollTo()

当然,我们还可以利用JavaScript为我们提供的函数scrollTo(x, y)来实现返回到页面顶部的功能。scrollTo函数可以滚动到指定坐标(x, y)处的内容。我们将坐标设定为(0, 0)即可起到返回顶部的作用。

<a href="javascript:scrollTo(0,0);">返回顶部</a>




// 在500毫秒内平滑滚动到页面顶部
$('body').animate( {scrollTop: 0}, 500);

三、使用js操作DOM样式

此外,我们还可以使用js将body或html等元素的scrollTop属性设置为0,即可滚动到页面的顶部。我们一般使用jQuery来实现上述代码。

// 以下三种方式均可实现返回页面顶部
$(window).scrollTop(0);

$('body').scrollTop(0);

$('html').scrollTop(0);