就像費大說的, 你的 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 了。

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

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

<pre class="c" name="code">
<script>
    (function($){
        $(window).load(function(){
            $("body").mCustomScrollbar();
            $("#gotop").click(function(){
                $("body").mCustomScrollbar("scrollTo", "#backhere");
            });
        });
    })(jQuery);
</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 會區分大小寫, 於是這個部份就爛掉了:

<pre class="c" name="code">
<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

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