iT邦幫忙

0

請教錨點失效問題

網頁:
https://dl.dropboxusercontent.com/u/61176848/website/index.html

網頁捲動到下方時,右邊的"Go Top!"設定錨點跳回網頁上方。

..........
<div id="anchorpoint">
<a id="backhere">GO Top anchor</a>
</div>

<div id="gotop">

<a href="#backhere">Go Top !</a>

</div>
..............

試了網路上各式解決方式都還是一樣不行

後來發現把上方宣告的地方從原本的<!DOCTYPE>改成
時,錨點就可正常作用
but, 這時右邊scrollbar樣式(jquery)和下方Div內容頁內嵌iframe 的show/hide(jquery)功能就無法正常運作了?

有辦法讓錨點能作用,同時網頁中其它jquery的插件都正常顯示嗎?

感謝~

2 個回答

8
weiclin
iT邦高手 4 級 ‧ 2013-12-12 18:14:56
最佳解答

就像費大說的, 你的 doctype 是錯的, 所以瀏覽器是用 quirks mode 在運作, 你如果想要把網頁做好, 這個一定要注意, 不然你永遠會遇到許多奇怪難解的問題。以下內容都是基於使用 的前提來說明。

首先, 並不是改完 doctype 就壞了, 而是你沒有用正確的方式使用這套件, 只是你用 quirks mode 去跑, 碰巧讓你可以用罷了。
網站上有說明:

**http://manos.malihu.gr/jquery-custom-content-scroller/**提到:
Your .content element(s) (or any other element you’re attaching the custom scrollbar) should have a typical styling of an overflowed block, e.g. a height (or max-height) value, overflow: auto (or hidden) and its content should be long enough to require a scrollbar.

所以你需要的是給 html 與 body 加上 height: 100%; 的 css, 這樣應該就會出現 scrolbar 了。

&lt;pre class="c" name="code">
&lt;style>
    html, body{
        height: 100%;
    }
&lt;/style>

再來因為這個套件並不是去修改瀏覽器的 scroll bar, 而是自己加上一個, 這造成你的錨點沒按照預期的運作。
修正的方法是用這套件本身提供的 scrollto 功能:

&lt;pre class="c" name="code">
&lt;script>
    (function($){
        $(window).load(function(){
            $("body").mCustomScrollbar();
            $("#gotop").click(function(){
                $("body").mCustomScrollbar("scrollTo", "#backhere");
            });
        });
    })(jQuery);
&lt;/script>

最後, 下面的 iframe 壞掉了, 也是因為你沒有正確使用 doctype 造成的。

**https://developer.mozilla.org/en/docs/Mozilla\_Quirks\_Mode\_Behavior**提到:
In quirks mode CSS class and id names are case insensitive. In standards mode they are case sensitive. (This also applies to getElementsByClassName.)

也就是你從原本的 quirks mode 不區分大小寫, 變成 standard mode 會區分大小寫, 於是這個部份就爛掉了:

&lt;pre class="c" name="code">
&lt;div id="contact" class="hide">
......省略
    $(".Hide").hide("slow");
......省略

參考資料:
http://stackoverflow.com/questions/627097/how-to-tell-if-a-browser-is-in-quirks-mode
http://stackoverflow.com/questions/2580029/jquery-class-selectors-like-someclass-are-case-sensitive
http://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-case-sensitive
http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window

kusabi iT邦新手 5 級 ‧ 2013-12-12 19:55:17 檢舉

真是太感謝了~
已經把有問題的地方改過來了
不過現在又出現一個問題~
加入

&lt;pre class="c" name="code">

&lt;script>  
    (function($){  
        $(window).load(function(){  
            $("body").mCustomScrollbar();  
            $("#gotop").click(function(){  
                $("body").mCustomScrollbar("scrollTo", "#backhere");  
            });  
        });  
    })(jQuery);  
&lt;/script>  

之後scrollbar功能變成滑鼠scroll只能往下滾動一點點就會卡住往回彈(但是可以用拖移scroll往下顯示網頁下方的內容)?

https://dl.dropboxusercontent.com/u/61176848/website/index.html

weiclin iT邦高手 4 級 ‧ 2013-12-12 20:14:58 檢舉

因為這一段是修改你原本的 script, 但你整個貼上去卻沒拿掉原本那一段, 中間有些部份重複執行了

kusabi iT邦新手 5 級 ‧ 2013-12-12 22:07:03 檢舉

成功了~謝謝~ ^^

2
fillano
iT邦超人 1 級 ‧ 2013-12-12 16:10:58

錨點應該是用name來指定名稱,而不是用id吧?

看更多先前的回應...收起先前的回應...
kusabi iT邦新手 5 級 ‧ 2013-12-12 16:14:12 檢舉

也試過用name了,不過一樣不行

fillano iT邦超人 1 級 ‧ 2013-12-12 16:49:33 檢舉

沒有<!DOCTYPE>這樣的東西吧?至少是...這已經是最精簡的了

fillano iT邦超人 1 級 ‧ 2013-12-12 16:58:35 檢舉

另外,你有先用瀏覽器的開發工具看過嗎?

kusabi iT邦新手 5 級 ‧ 2013-12-12 19:46:04 檢舉

感謝回覆~

一開始用<!DOCTYPE>這個反而有些能正常顯示時也覺得奇怪,一直想不出為什麼(看下面的說明才知道問題)

拍勢,平時都是只做平面,很少踫網站,一直會卡在奇怪的地方~ ^^p

fillano iT邦超人 1 級 ‧ 2013-12-12 20:56:32 檢舉

有幫到忙就好哈哈

我要發表回答

立即登入回答