需要使用字符串滚动到具有相同ID的div，而不使用锚标记

Question

我有一个链接，单击它将获得所选链接的HREF，并将其转换为ID。

例如

/limo/#Vehicles将在点击时生成"#Vehicle"（作为字符串），并应滚动到名为"Vehicles"的ID

/limo/#Vehicles/Crysler将在点击时生成"#Chrysler"（作为字符串），并应滚动到名为"Chryslers"的ID

目前，当我选择链接时，它不会滚动，但警报显示"#Vehicles"one_answers"#Chrysler"字符串正在正确形成。

我试图得到id的位置，并滚动到坐标，但这也不起作用。

这是我的。。。

[code]
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

function backupNavigation_click(clicked_href)
{

var abc = clicked_href.substring(clicked_href.lastIndexOf('/') +1);
if (abc.match("^#")) {
var goTo = abc;
alert (goTo);
function(e) {
    // target element id
    var id = goTo;
    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }
    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();
    // top position relative to the document
    var pos = $(id).offset().top;
    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
}
}
else{
var goTo = "#" + abc;
alert (goTo);

function(e) {
    // target element id
    var id = goTo;
    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }
    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();
    // top position relative to the document
    var pos = $(id).offset().top;
    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
}

}
}
}else
{
if (window.innerWidth> 479) {
 $('head').append('   <script type="text/javascript" src="js/jquery.fullPage.js">');
}
            $(document).ready(function()
            {
                $('#fullpage').fullpage(
                {
                    anchors: ['Home', 'Events', 'Vehicles', 'Testimonials', 'Specials', 'AboutUs', 'Quotes'],
                    sectionsColor: ['none', 'none', 'none','none', 'none', 'none', 'none'],
                    scrollOverflow: true
                });
            });

}
[/code]

这里有一个链接到我正在工作的网站，如果你测试移动设备，你应该看看我在说什么，桌面版本运行良好。

http://lookupblue.com/elclimo

 <script type="text/javascript">

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

function backupNavigation_click(clicked_href)
{

var abc = clicked_href.substring(clicked_href.lastIndexOf('/') +1);
if (abc.match("^#")) {
var goTo = abc;
alert (goTo);
$('a').on("click", function(e) {
        // prevent default state change
        e.preventDefault();
    // get href of clicked
        var abc = $(this).attr('href');
    // Find last '/' and get everything after
    abc = abc.substring(abc.lastIndexOf('/')+1, abc.length);
    // If '#' found then chop off
    if(abc.indexOf('#') > -1) {
        abc = abc.substring(1, abc.length);
    }
    console.log(abc);
    // Find matching with matching id
    var pos = $('#' + abc).offset().top;
    console.log(pos);
    // Scroll to it
    $('html, body').animate({
        scrollTop: pos
    }, 400);
})




}
else{
var goTo = "#" + abc;
alert (goTo);
$('a').on("click", function(e) {
        // prevent default state change
        e.preventDefault();
    // get href of clicked
        var abc = $(this).attr('href');
    // Find last '/' and get everything after
    abc = abc.substring(abc.lastIndexOf('/')+1, abc.length);
    // If '#' found then chop off
    if(abc.indexOf('#') > -1) {
        abc = abc.substring(1, abc.length);
    }
    console.log(abc);
    // Find matching with matching id
    var pos = $('#' + abc).offset().top;
    console.log(pos);
    // Scroll to it
    $('html, body').animate({
        scrollTop: pos
    }, 400);
})

}
}



}else
{
if (window.innerWidth> 479) {
 $('head').append('   <script type="text/javascript" src="js/jquery.fullPage.js">');
}

            $(document).ready(function()
            {
                $('#fullpage').fullpage(
                {
                    anchors: ['Home', 'Events', 'Vehicles', 'Testimonials', 'Specials', 'AboutUs', 'Quotes'],
                    sectionsColor: ['none', 'none', 'none','none', 'none', 'none', 'none'],
                    scrollOverflow: true
                });
            });

}

</script>

    </head>
    <body>
        <div class="container">
            <div id="TopNav" class="slide">
                <header class="slide">
                    <!--    Add "slideRight" class to items that move right when viewing Nav Drawer  -->
                    <ul id="navToggle" class="burger slide">
                        <!--    Add "slideRight" class to items that move right when viewing Nav Drawer  -->
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <h1>EXQUISITE LIMOUSINE</h1>
                </header>
                <nav class="slide">
           <ul>
        <li class="MenuHeading active" data-menuanchor="Home"><a href="#Home" onclick="backupNavigation_click(this.href);">HOME</a></li>
        <li class="MenuHeading" data-menuanchor="Events"><a href="#Events" onclick="backupNavigation_click(this.href);">EVENTS</a><i id="eTog" class="fa fa-toggle-off"></i>
            <ul class="capo">
                <li class="lilbuddy ace"><a href="#Events/Weddings" onclick="backupNavigation_click(this.href);">Weddings</a>
                        </li>
                        <li class="lilbuddy"><a href="#Events/Quinceaneras" onclick="backupNavigation_click(this.href);">Quinceaneras</a>
                        </li>
                        <li class="lilbuddy"><a href="#Events/SpecialEvent" onclick="backupNavigation_click(this.href);">Special Events</a>
                        </li>
                        <li class="lilbuddy"><a href="#Events/School" onclick="backupNavigation_click(this.href);">School Events</a>
                        </li>
                        <li class="lilbuddy"><a href="#Events/Corporate" onclick="backupNavigation_click(this.href);">Corporate Events</a>
                        </li>
            </ul>
        </li>
        <li class="MenuHeading" data-menuanchor="Vehicles"><a href="#Vehicles" onclick="backupNavigation_click(this.href);">VEHICLES</a><i id="vTog" class="fa fa-toggle-off"></i>
            <ul class="boss">
                    <li class="lilbuddy ace"><a href="#Vehicles/Escalade" onclick="backupNavigation_click(this.href);">4 Guests - Escalade</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/Chrysler" onclick="backupNavigation_click(this.href);">10 Guests - 300C</a>
                        </li>
<li class="lilbuddy"><a href="#Vehicles/Frankenstein" onclick="backupNavigation_click(this.href);">22 Guests - FrankNstein</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/Hummer" onclick="backupNavigation_click(this.href);">22 Guests - Hummer</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/MadMax" onclick="backupNavigation_click(this.href);">25 Guests - Mad Max</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/Bella" onclick="backupNavigation_click(this.href);">26 Guests - Bella</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/KIT" onclick="backupNavigation_click(this.href);">26 Guests - Kit</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/Rockstar" onclick="backupNavigation_click(this.href);">28 Guests - Rock Star</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/MrBubbles" onclick="backupNavigation_click(this.href);">28 Guests - Bubbles</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/Uno" onclick="backupNavigation_click(this.href);">30 Guests - Uno</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/Hera" onclick="backupNavigation_click(this.href);">30 Guests - Hera</a>
                        </li>
                        <li class="lilbuddy"><a href="#Vehicles/Voyager" onclick="backupNavigation_click(this.href);">31 Guests - Shuttle</a>
                        </li>
            </ul>
        </li>
        <li class="MenuHeading" data-menuanchor="Testimonials"><a href="#Testimonials" onclick="backupNavigation_click(this.href);">TESTIMONIALS</a></li>
<li class="MenuHeading" data-menuanchor="Specials"><a href="#Specials" onclick="backupNavigation_click(this.href);">SPECIALS</a></li>
<li class="MenuHeading" data-menuanchor="AboutUs"><a href="#AboutUs" onclick="backupNavigation_click(this.href);">ABOUT US</a></li>
<li class="MenuHeading" data-menuanchor="Quotes"><a href="#Quotes" onclick="backupNavigation_click(this.href);">GET A QUOTE</a></li>
    </ul>
                </nav>
            </div>

            <div class="content slide">
                <div id="fullpage">
                    <div class="section " id="Section0">
                        <div class="row">
                            <div class="four columns">
                                <h4 class="introHeader">Limousine and party bus services for Chicagoland and the surrounding suburbs.</h4>
                            </div>

                        </div>
<div class="row introAddress">

                              <p>  2420 Hamilton Road</p>
<p>Arlington Heights, IL 60005</p>
<p>773-877-3050</p>
<p>Email: [e-mail] </p>
</div>
                    </div>

                    <div class="section" id="Section1">

                        <div class="slide" id="Weddings" data-anchor="Weddings">
      <div class="row">
                                <div class="nine columns leftPad">
                                    <h1>Weddings</h1>
                                    <h4>Making your special day even more special, for everyone.</h4> Look to Exquisite Limousine Chicago for all the transportation you will need
                                    leading up to and including your wedding day. Why leave anything to chance.
                                    Arrange a special ride for all aspects of your celebration. Engagement party,
                                    bridal shower, bachelor and bachelorette parties, rehearsal dinner and the
                                    wedding day itself. We will make sure that all your guests and participants
                                    are there on time.</div>

                            </div>
                            <div class="row">
                                <div class="three columns leftPad">
                                    <h5>Bridal Shower</h5> Having your bridal shower at a great club or restaurant? Rent one of our Party
                                    Buses or stretch limos and make sure everyone is there on time. No more fumbling
                                    with gifts or party favors and finding a parking spot. Pick up and drop off
                                    services are available.</div>
                                <div class="three columns">
                                    <h5>Bachelor / Bachelorette Parties</h5> No one wants to be the responsible one at a bachelor or bachelorette party.
                                   Music and refreshments of your choice are ready and waiting
                                    for you. Our chauffeur can pick you up and drop you off, or you can block his
                                    time out for the night if you plan to hop from place to place. </div>
                                <div class="three columns">
                                    <h5>Rehearsal Dinner</h5>Rent
                                    one of our stretch limos or one of our party buses and get everyone to the
                                    rehearsal dinner at the same time. The introductions and fun start on the ride
                                    over. By the time you arrive at the restaurant, everyone knows each other and
                                    the dinner is off to a great start.</div>

Answer 1

以下是我所做的：

// a onclick
$('a').on("click", function(e) {
    // prevent default state change
    e.preventDefault();
    // get href of clicked
    var abc = $(this).attr('href');
    // Find last '/' and get everything after
    abc = abc.substring(abc.lastIndexOf('/')+1, abc.length);
    // If '#' found then chop off
    if(abc.indexOf('#') > -1) {
        abc = abc.substring(1, abc.length);
    }
    console.log(abc);
    // Find matching with matching id
    var pos = $('#' + abc).offset().top;
    console.log(pos);
    // Scroll to it
    $('html, body').animate({
        scrollTop: pos
    }, 400);
})

以下是我使用任意HTML的JSFiddle：https://jsfiddle.net/ae2eck7c/2/