如果正文中存在 id，如何自动滚动到目标 div？答案

【问题标题】：How to auto scroll to target div if an id exists within body?如果正文中存在 id，如何自动滚动到目标 div？
【发布时间】：2016-10-12 02:13:22
【问题描述】：

假设我的网站上有一个全屏滑块，当您点击导航菜单时，每次访问页面或刷新时向下滚动真的很烦人。

假设我有这样的结构：

<body page-section="news">

    <div class="royalslider">
        This is a slider and it is fullscreen
    </div>

    <div id="body-layouts">
        This is the body layout
    </div>

</body>

如果正文中存在 page-section="news" 属性，我如何自动滚动到 body-layouts div？

更多信息：访问此网站http://unionstationdenver.com/，您会注意到点击导航时，您会自动向下滚动到目标 div :)

【问题讨论】：

这是负责在您链接的网站上滚动页面的脚本：unionstationdenver.com/lib/js/550.js
也许 scrollIntoView 可以满足您的需求？如果你想从 javascript 驱动它。

标签： javascript jquery html css

【解决方案1】：

试试这个：

与js香草：

// first you get the the value of page-section
var section = document.querySelector("body").hasAttribute("page-section");
// after you check the value
if(section == "news") {
// if it is ok, you redirect
    location.href = "#body-layouts";
}

jquery:

var section = $("body").attr("page-section");
if(section == "news") {
    location.href = "#body-layouts";
}

具有多个属性：

var attr1 = $("body").attr("page-section1");
var attr2 = $("body").attr("page-section2");
var redirection = "";
if(attr1 == "news") {
    redirection = "something";
} else if(attr2 == "something") {
    redirection = "something"; 
}

$('html, body').animate({
    scrollTop: $( $(redirection) ).offset().top - NAVBARHEIGHT
}, 0);

【讨论】：

嗨！ Js 代码不起作用，我对 jQuery 没问题，但是我想使用更多属性而不是只使用页面部分，我对 javascript 不太好，所以非常感谢帮助:) 并添加另一个问题：我滚动到视图时还想添加类似 .top -65 的内容，因为我有一个粘性标题，并且目标 div 位于标题下方:)

【解决方案2】：

这是一个使用 jQuery 将 scrollTo 插件用于页面上特定 div 的简短示例。 ID 被传递给函数，替换 (newsOneLink -> newsOne) 然后滚动到相应的 div，避免已经存在的 ID。如果您想添加更多内容，请确保仅在 <a> 标记的 id 末尾附加 Link。

function goToByScroll(id){
        // Reove "Link" from the ID
        id = id.replace("Link", "");
        $('html,body').animate({
            scrollTop: $("#"+id).offset().top},
            'slow');
    }

    //Change slow to a number to change the animation speed

    $("#links > a").click(function(e) { 
        e.preventDefault(); 
        //Now go to function to scroll to div
        goToByScroll($(this).attr("id"));           
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="container">
        <div id="links">   
                <a id = "newsOneLink" href="#">News One</a>
                <a id = "newsTwoLink" href="#">News Two</a>
                <a id = "newsThreeLink" href="#">News Three</a>
        </div>
        <div id="content">
            <div id="newsOne">
                <p class="header">News One</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>       
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>           
            <div class="sections"id="newsTwo">
                <p class = "header">News Two</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>   
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div class="sections" id="newsThree">
                <p class = "header">News Three</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

【讨论】：

【解决方案3】：

既然你对 jQuery 没问题，我建议在文档准备好时运行以下命令。这将适用于偏移量修改。

$(function() {
    function scrollTo(hash, offset) {
        if(typeof offset === 'undefined') {
            offset = 0;
        }
        $('html, body').animate({ scrollTop: $('#' + hash).offset().top + offset }, 'slow');
        return false;
    }
    var section = $("body").attr("page-section");
    if(section && section === "news") {
        scrollTo("body-layouts");
        // scrollTo("body-layouts", -65);
    }
});

【讨论】：