jQuery的scrollTop的不與查詢字符串環節的工作

我有一個導航的初始URL看起來是這樣的：jQuery的scrollTop的不與查詢字符串環節的工作

test.php?query=19

，我有像這樣<a href="#section-1">Section 1</a><a href="#section-2">Section 2</a><a href="#section-3">Section 3</a>

有3個部分我的網頁上的鏈接：

<section id="section-1"></section><section id="section-2"></section><section id="section-3"></section>

我正在使用這個jquery代碼從頁面頂部滾動到該部分（或用戶在p上年齡）到該部分的頂部，並且不會在我的網址中顯示#標記。

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
      if (target.length) { 
       $('html,body').animate({ 
        scrollTop: target.offset().top 
       }, 2000); 
       return false; 
      } 
     } 
    }); 
});

我的問題是，這不會滾動到該部分。它只是去部分的底部，然後滾動到頂部和#出現在我的網址。

我還有一個菜單上我的主網頁：

home.php，我使用完全相同的jQuery代碼，它工作在該網頁。

我的問題是如何獲得的scrollTop的在我的test.php?query=19頁工作像它在home.php當我在一個像點擊test.php?query=19我的網址更改爲：test.php?query=19#section-1

來源

2015-06-17 user979331

你在控制檯中看到的任何錯誤？ – Dhiraj

你說你在菜單上有完全相同的代碼。我有兩個問題：1）這部分'$（'a [href * =＃]：not（[href =＃]）'）'是一樣的嗎？因爲您正在定位頁面中的每個鏈接，並且如果2）加載腳本兩次（菜單+此頁面），點擊處理程序會多次添加 – JohnKiller

*如果*您已在此處發佈* actual *代碼，則...它按原樣工作，並且你沒有問題（儘管該功能可能會簡化一點）。所以唯一的答案是這個問題在你發佈的位中是* not *。嘗試發佈你的實際'HTML'和'javascript' ...在發佈之前切出任何完全不相關的部分（但要確保問題仍然存在於你發佈的任何「最小」代碼中）。我敢打賭你會發現問題出在這個過程中，當你切出一些似乎完全不相關的部分;） – Mikk3lRo

我會改變你的邏輯處理你的代碼。防止默認事件並直接通過attr訪問href。

事情是這樣的：

$(function() { 
    $('a[href*=#]:not([href=#])').on('click', function(e) { 
     e.preventDefault(); 
     if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
      var $target = $(this).attr('href'); 
      if ($target.size()) { 
       $('html,body').animate({ 
        scrollTop: $target.offset().top 
       }, 2000); 
      } 
     } 
    }); 
});

順便說一句，我不知道如何瞭解你使用a[href*=#]:not([href=#])選擇。此外，條件（if location.pathnae.blah...）似乎很尷尬。我只想做這樣的事情：

$(function() { 
    $('#some-wrapper').on('click', 'a.scroll-to', function(e) { 
     e.preventDefault(); 
     var $target = $(this).attr('href'); 
     if ($target.size()) { 
      $('html,body').animate({ 
       scrollTop: $target.offset().top 
      }, 2000); 
     } 
    }); 
});

來源

2015-07-07 19:30:59 viarnes

' a [href * =＃]：not（[href =＃]）'非常清楚......任何地方都有'＃'的鏈接，但不僅僅是一個'＃'（這通常用於鏈接這隻會觸發一些JavaScript）。「尷尬」'location.pathname'-條件可能是一種解決方法，可以忽略鏈接和當前頁面的任何獲取參數。在某些情況下，你的方法會給出非常不同的結果......但是如果OP完全控制了整個頁面，則解決方法實際上不應該是必須的......順便說一句，在檢查之前，你推薦'e.preventDefault（）'*如果它是可滾動的！？ – Mikk3lRo

是的，如果它不是可滾動的，那麼你可以只是'window.location = this.attr（'href'）;'或類似的。我沒有將這部分添加到我的回答中，因爲我認爲每次都想滾動。 – viarnes

使用e.preventDefault();以防止您的代碼中加入#您當前url

您也可以使用此代碼滾動在任何一個特定部分頁：

HTML：

<div id = 'a' style = 'height:300px;'> 
123 
</div> 
<a href= '#b'>Go to 456 </a> 

<div id = 'b' style = 'height:300px;' > 
456 
</div> 
<a href= '#c'>Go to 789 </a> 

<div id = 'c'style = 'height:300px;' > 
789 
</div> 
<a href= '#d'>Go to asd </a> 

<div id = 'd' style = 'height:300px;' > 
asd 
</div> 
<a href= '#e'>Go to fgh </a> 

<div id = 'e' style = 'height:300px;' > 
fgh 
</div> 
<a href= '#a'>Go to 123 </a>

SCRIPT：

function scroll(id){ 
    $('html, body').animate({ 
     scrollTop: $(id).offset().top 
    }, 2000); 
} 
$(document).ready(function() { 
    $('a[href*=#]:not([href=#])').click(function (e) { 
     var id = $(this).attr('href') 
     scroll(id); 
     e.preventDefault(); 
    }); 
});

DEMO： http://jsfiddle.net/ishandemon/k19p33tm/

http://jsfiddle.net/ishandemon/k19p33tm/1/

來源

2015-07-09 10:30:45

jsfiddle鏈接的很好的示例+1 –

jQuery的scrollTop的不與查詢字符串環節的工作

回答

相關問題