Reputation: 33

How to auto scroll to target div if an id exists within body?

Consider i have a full screen slider on my website, when clicking on navigation menus its really annoying to scroll down every time you visit a page or a refresh.

So lets Say i have a structure like:

<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>

How do i go about auto scroll to body-layouts div if page-section="news" attribute exists within body?

More information: Visit this website http://unionstationdenver.com/ you will notice that when clicking on navigation's, you're automatically scrolled down to the targeted divs :)

Upvotes: 3

Answers (3)

tuck

Reputation: 623

Since you are okay with jQuery I would suggest the following to run when the document is ready. This will work with an offset modification or not.

$(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);
    }
});

Upvotes: 0

Sam5487

Reputation: 679

Here is a short example of using scrollTo plugin to specific divs on the page using jQuery. ID is passed to function, replaced (newsOneLink -> newsOne) and then scrolls to the corresponding div, avoiding ID's that already exist. If you want to add more just make sure Link is appended at the end of the id only for the <a> tag.

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>

Upvotes: 1

Alec von Barnekow

Reputation: 1001

Try this:

With js vanilla:

// 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";
}

With jquery:

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

With multiple attributes:

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);

Upvotes: 2

How to auto scroll to target div if an id exists within body?

Answers (3)

Related Questions