有没有办法滚动到锚点，而不是使用JavaScript跳转（类似于光滑滚动）

我有一个带有编号锚标签的大文档，如下所示。和一个文本框打孔数字去锚点使用window.location.hash有没有办法滚动到锚点，而不是使用JavaScript跳转（类似于光滑滚动）

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

<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。

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

来源

2011-06-23 testere

克里斯Coyier得到了一个工作示例http://css-tricks.com/snippets/jquery /平滑滚动/您必须相应地更改您的代码 – manraj82

Smooth scrolling demo

Creating the Smooth Scroll Effect with JavaScript

来源

2011-07-09 12:19:03 testere

不要只是链接它，回答它。你有一个失败的链接顺便说一句。 – justinkoh

你可能想看看this tutorial或谷歌为“JS平滑滚动”

来源

2011-06-23 08:24:59 nico

明白！ http://www.itnewb.com/v/Creating-the-Smooth-Scroll-Effect-with-JavaScript or http://www.kryogenix.org/code/browser/smoothscroll/#top – testere

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

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

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

如果你想内自动添加此行为所有的锚定div（或整个页面），您可以使用LocalScroll plugin这使得整个这个简单：

$.localScroll();

来源

2011-06-23 08:25:42

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

来源

2011-06-23 09:14:41 jchavannes

添加jQuery库。

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

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

target是目标元素的id和1000是动画的持续时间。

来源

2011-06-23 09:42:53

+12

不含义为了恢复一个老问题，你的解决方案中存在一个错误;您需要引用'offset'对象的'top'，而不是偏移本身。换句话说：'jQuery（'html，body'）。animate {{scrollTop：jQuery（'＃target'）。offset（）。top}，1000）;' – ean5533

我冒昧地将@ ean5533的错误修复应用为它是现货。首先，我复制/粘贴答案的代码;没有工作。大坝，开始寻找别的东西。后来看到了评论。 Ups，它的工作原理！ – brasofilo

伟大的工作，完美的作品。 – justinkoh

使用此代码，并享受CSS技巧的

$(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; 
    }); 
}); 
});

来源

2013-07-05 14:32:15

有没有办法滚动到锚点，而不是使用JavaScript跳转（类似于光滑滚动）

回答

相关问题