有沒有辦法滾動到錨點，而不是使用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跳轉（類似於光滑滾動）

回答

相關問題