javascript - एंकर लिंक पर क्लिक करते समय चिकनी स्क्रॉलिंग




jquery scroll (14)

JQuery का उपयोग करना:

$('a[href*=#]').click(function(){
  $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  return false;
});

मेरे पृष्ठ पर मेरे कुछ हाइपरलिंक हैं। एक एफएक्यू जो उपयोगकर्ता मेरे सहायता अनुभाग पर जाते समय पढ़ेंगे।

एंकर लिंक का उपयोग करके, मैं पेज को एंकर की तरफ स्क्रॉल कर सकता हूं और वहां उपयोगकर्ताओं को मार्गदर्शन कर सकता हूं।

क्या स्क्रॉलिंग चिकनी बनाने का कोई तरीका है?

लेकिन ध्यान दें कि वह एक कस्टम जावास्क्रिप्ट लाइब्रेरी का उपयोग कर रहा है। शायद jQuery इस बेक्ड की तरह somethings प्रदान करता है?


jQuery सबसे अच्छा है!

$('a').click(function(){
    //code here
});

इसे जोड़ना:

function () {
    window.location.hash = href;
}

किसी भी तरह लंबवत ऑफसेट को रद्द कर रहा है

top - 72

फ़ायरफ़ॉक्स और आईई में, क्रोम में नहीं। असल में, पेज उस बिंदु पर सुचारू रूप से स्क्रॉल करता है जिस पर इसे ऑफ़सेट के आधार पर रोकना चाहिए, लेकिन तब ऑफसेट के बिना पृष्ठ कहां जाता है।

यह यूआरएल के अंत में हैश जोड़ता है, लेकिन वापस दबाने से आपको शीर्ष पर वापस नहीं ले जाता है, यह सिर्फ यूआरएल से हैश हटा देता है और यह देखने वाली विंडो को छोड़ देता है जहां यह बैठता है।

यहां पूर्ण जेएस है जिसका मैं उपयोग कर रहा हूं:

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top - 120
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

एक चिकनी स्क्रॉल के लिए, मैंने कई लिंक और एंकरों के लिए लागू किया गया समाधान यहां दिया गया है:

http://www.adriantomic.se/development/jquery-localscroll-tutorial/ यदि आपके पास नेविगेशन div में आपके नेविगेशन लिंक सेट हैं और इस संरचना के साथ घोषित किया गया है:

<a href = "#destinationA">

और आपके संबंधित एंकर टैग गंतव्यों के रूप में:

<a id = "destinationA">

फिर इसे दस्तावेज़ के सिर में लोड करें:

    <!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

<script type = "text/javascript">
 $(document).ready(function()
    {
        // Scroll the whole document
        $('#menuBox').localScroll({
           target:'#content'
        });
    });
</script>

@Adriantomic के लिए धन्यवाद


कभी भी भूलें कि ऑफसेट () फ़ंक्शन दस्तावेज़ के लिए आपके तत्व की स्थिति दे रहा है। तो जब आपको अपने माता-पिता के सापेक्ष अपने तत्व को स्क्रॉल करने की आवश्यकता होती है तो आपको इसका उपयोग करना चाहिए;

    $('.a-parent-div').find('a').click(function(event){
        event.preventDefault();
        $('.scroll-div').animate({
     scrollTop: $( $.attr(this, 'href') ).position().top + $('.scroll-div').scrollTop()
     }, 500);       
  });

मुख्य बिंदु स्क्रॉल-div का स्क्रॉल प्राप्त हो रहा है और इसे scrollTop में जोड़ें। यदि आप ऐसा नहीं करेंगे () फ़ंक्शन हमेशा आपको अलग-अलग स्थिति मान देता है।


दिया गया जवाब काम करता है लेकिन आउटगोइंग लिंक अक्षम करता है। एक अतिरिक्त बोनस के साथ एक संस्करण के नीचे आसानी से (स्विंग) और आउटगोइंग लिंक का सम्मान करता है।

$(document).ready(function () {
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

मुझे आश्चर्य है कि किसी ने मूल समाधान पोस्ट नहीं किया है जो ब्राउज़र स्थान हैश को मिलान करने का भी ख्याल रखता है। यह रहा:

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

ट्यूटोरियल देखें: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml


मैं आपको यह सामान्य कोड बनाने का सुझाव देता हूं:

$('a[href^="#"]').click(function(){

var the_id = $(this).attr("href");

    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');

return false;});

आप यहां एक बहुत अच्छा लेख देख सकते हैं: jquery-effet-smooth-scroll-defilement-fluide


यदि आपके पास पृष्ठ पर एक स्क्रॉल करने के लिए पृष्ठ पर एक साधारण बटन है और बैक बटन शीर्ष पर कूदकर काम करना चाहते हैं, तो बस यह कोड जोड़ें:

$(window).on('hashchange', function(event) {
    if (event.target.location.hash=="") {
        window.scrollTo(0,0);
    }
});

यह हैश मूल्य को पढ़कर, और जोसेफ सिल्बर के जवाब की तरह स्क्रॉल करके विभिन्न divs पर कूदने के लिए बढ़ाया जा सकता है।


यह jQuery को आपके लक्ष्य हैश को समझने और कब और कहां रुकने के बारे में जानने में आसान बनाता है।

$('a[href*="#"]').click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});

सही वाक्यविन्यास है:

//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
  $('html,body').animate({scrollTop:$(location.hash).offset().‌​top}, 500);
});

सरलीकरण : DRY

function smoothScrollingTo(target){
  $('html,body').animate({scrollTop:$(target).offset().‌​top}, 500);
}
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    smoothScrollingTo(this.hash);
});
$(document).ready(function(){
  smoothScrollingTo(location.hash);
});

href*=\\# का स्पष्टीकरण:

  • * अर्थ यह है कि इसमें # char शामिल हैं। इस प्रकार केवल एंकर से मेल खाते हैं । इसके अर्थ के बारे में अधिक जानकारी के लिए, here देखें
  • \\ ऐसा इसलिए है क्योंकि # सीएसएस चयनकर्ता में एक विशेष char है, इसलिए हमें इसे बचाना होगा।

अप्रैल 2018 अपडेट करें: अब ऐसा करने का मूल तरीका है :

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

यह वर्तमान में केवल सबसे खून बहने वाले किनारे ब्राउज़र में समर्थित है।

पुराने ब्राउज़र समर्थन के लिए, आप इस jQuery तकनीक का उपयोग कर सकते हैं:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

और यहाँ पहेली है: http://jsfiddle.net/9SDLw/

यदि आपके लक्षित तत्व में आईडी नहीं है, और आप इसके name से इसे लिंक कर रहे हैं, तो इसका उपयोग करें:

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

बढ़ते प्रदर्शन के लिए, आपको उस $('html, body') चयनकर्ता को कैश करना चाहिए, ताकि यह प्रत्येक बार एंकर पर क्लिक न हो:

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

यदि आप यूआरएल को अपडेट करना चाहते हैं, तो इसे animate कॉलबैक के भीतर करें:

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

$('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

यह मेरे लिए सही काम किया


$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

आधिकारिक: http://css-tricks.com/snippets/jquery/smooth-scrolling/





anchor