Question

我有一个带有编号锚标签的大文档，如下所示。还有一个文本框用于打入数字以转到使用 window.location.hash

的锚点

我也使用箭头键去下一个或前一个锚点。我想滚动到锚点，以便给出一些方向感。

<a name="1">
some text
<a name="2">
some text
<a name="3">

这是我的功能

function updatePageNumber()
{
    var pagenumber;
    pagenumber = document.getElementById('pageNumber').value;   
    window.location.hash =  pagenumber;
}

跳到锚点是非常难看的，人们在文本中失去了方向感。那么有没有办法滚动到JavaScript锚点。我知道有很多jQuery示例，但我不知道jQuery并且找不到JavaScript。

最重要的原因是我想在地址栏上看到我的页码！

Answer 1

添加jQuery库。

使用以下脚本平滑滚动到所需的目标元素。

jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);

target是目标元素的ID，1000是动画的持续时间。

Answer 2

Smooth scrolling demo

Creating the Smooth Scroll Effect with JavaScript

Answer 3

使用此代码并享受

$(document).ready(function(){
$("#btop").hide();  // replace only #btop with your <div id=" ">

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop()>100){
            $('#btop').fadeIn();  // replace only #btop with your <div id=" ">
        }
        else{
            $('#btop').fadeOut(); // replace only #btop with your <div id=" ">
        }
    });

    $('#btop a').click(function(){ // replace only #btop with your <div id=" ">
        $('body,html').animate({
          scrollTop:0
        },200);  // to speed up scroll replace 200 to 300 or 500
        return false;
    });
});
});

Answer 4

您可能需要查看this tutorial或谷歌搜索“JS平滑滚动”

Answer 5

JavaScript中没有内置的平滑滚动，所以你必须自己实现它 - 但是如果你已经在jQuery中已经有它，那么为什么要重新发明轮子你可能不需要添加超过两三行代码？只需下载jQuery和ScrollTo plugin，将它们添加到<head>标记中的<script>部分，然后使用此部分滚动到具有给定ID的元素：

$.scrollTo("#my-element-id");

这将滚动到ID为my-element-id的元素，因此您必须使用锚点中的id=...属性而不是name=...属性。

如果您希望自动将此行为添加到给定div（或整个页面）中的所有锚点，您可以使用LocalScroll plugin使整个过程简单如下： / p>

$.localScroll();

Answer 6

我知道你说你不懂jQuery，但是你还是想用它来滚动它。 Here's a simple example如何使用它。

有没有办法滚动到锚点而不是用javascript跳转（类似于平滑滚动）

6 个答案: