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

487

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

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

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

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

javascript  jquery  scroll  hyperlink  anchor 
— केवल बोलिवियन यहाँ
स्रोत
क्या आप कृपया सर्वोत्तम उत्तर की समीक्षा कर सकते हैं? शुद्ध सीएसएस वन-लाइन समाधान सभी भारी सुझावों के बीच खोजना मुश्किल है: stackoverflow.com/a/51588820/1422553
— Александр Киричек

जवाबों:

1158

अद्यतन अप्रैल 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/

यदि आपके लक्ष्य तत्व में ID नहीं है, और आप इसके द्वारा इसे लिंक कर रहे हैं 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;
});

यदि आप चाहते हैं कि URL अपडेट किया जाए, तो इसे 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;
});
— जोसेफ सिलबर
स्रोत
10
ऐसा लगता है कि URL से # रिस्टेंशन को हटाकर बैक फंक्शन को तोड़ दिया गया है। क्या इसके चारों ओर एक रास्ता है?
— फ्लेच
2
@ जोसेफिल्बर को scrollTop: $(this.hash).offset().topइसके बजाय नहीं होना चाहिए scrollTop: $(this.href).offset().top?
— 22
4
@CreateSean -scrollTop: $(href).offset().top - 72
— जोसेफ
5
मेरा तर्क है कि html, bodyयहाँ ऑब्जेक्ट को कैशिंग करना अनावश्यक है, एक क्लिक के अनुसार चयनकर्ता को चलाना वास्तव में उतना नहीं है।
2
सबसे पहले समाधान सबसे अच्छा और सबसे आधुनिक, तो आप इस के साथ पुराने ब्राउज़रों पर इस व्यवहार का समर्थन करने के लिए इस polyfill का उपयोग कर सकते है polyfill
— Efe
166

सही सिंटैक्स है:

//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*=\\#:

  • *इसका मतलब यह है कि इसमें #चार शामिल हैं । इस प्रकार केवल लंगर का मिलान करें । इस के अर्थ के बारे में अधिक जानकारी के लिए, यहां देखें
  • \\चूँकि #css चयनकर्ता में एक विशेष चार है, इसलिए हमें इससे बचना होगा।
— एन्ड्रेस अलग
स्रोत
8
मुझे केवल लंगर के लिए $('a')$('a[href*=#]')
— आग्रह
2
@okliv यह बहुत अधिक सेवा करेगा, उदाहरण के लिए एक जावास्क्रिप्ट लिंक जैसे <a href="javascript:$('#test').css('background-color', '#000')">Test</a>। आपको $('a[href^=#]')एक हैश चरित्र के साथ शुरू होने वाले सभी url से मेल खाने के लिए उपयोग करना चाहिए ।
— मार्टिन ब्रौन
3
यह भी, '#' एक विशेष पात्र है और इसे इस तरह से बच निकलने की जरूरत है:a[href^=\\#]
— QuinnFreedman
3
इससे अन्य पेजों पर काम करने से रोकने के लिए एंकरों के लिंक बन गए। एक सशर्त जोड़कर हल किया जाता है अगर ($ ($। इस प्रकार) .लेसर) .length) {... चिकनी स्क्रॉल। }
— लिरेन
1
जब मैं किसी नए पृष्ठ पर पहली बार यात्रा कर रहा हूँ तो मैं इसे कैसे देख सकता हूँ? उदाहरण के लिए क्लिक करें: website.com/newpage/#section2 मैं चाहूंगा कि यह पेज लोड हो और फिर नीचे स्क्रॉल करें। क्या यह संभव है?
— समीर
72

CSS3 में नई हॉटनेस। यह इस पृष्ठ पर सूचीबद्ध प्रत्येक विधि की तुलना में बहुत आसान है और किसी भी जावास्क्रिप्ट की आवश्यकता नहीं है। बस नीचे दिए गए कोड को आप सीएसएस में दर्ज करें और आप के स्वयं के पृष्ठ के स्थानों के लिए अचानक लिंक लिंक के पास एक सहज स्क्रॉलिंग एनीमेशन होगा।

html{scroll-behavior:smooth}

उसके बाद एक div की ओर इंगित किए गए किसी भी लिंक को आसानी से उन वर्गों पर विभाजित किया जाएगा।

<a href="#section">Section1</a>

संपादित करें: उपरोक्त टैग के बारे में भ्रमित लोगों के लिए। मूल रूप से यह एक लिंक है जो क्लिक करने योग्य है। फिर आप अपने वेब पेज में कहीं और एक और div टैग लगा सकते हैं

<div classname="section">content</div>

इस संबंध में एक लिंक क्लिक करने योग्य होगा और जो कुछ भी #section पर जाएगा, इस मामले में यह हमारा div है जिसे हमने अनुभाग कहा है।

BTW, मैंने इसे काम करने के लिए घंटों बिताए। कुछ अस्पष्ट टिप्पणी अनुभाग में समाधान मिला। यह छोटी गाड़ी थी और कुछ टैग में काम नहीं करेगी। शरीर में काम नहीं किया। जब मैंने इसे सीएसएस फ़ाइल में html {} में डाला तो यह आखिरकार काम आया।

— क्रिस्टियन रेयेस
स्रोत
4
मैं बहुत काम कर सकता हूं लेकिन वे कमियां हैं
— बज़ुत
3
अच्छा है, लेकिन सावधान रहें क्योंकि फिलहाल यह सफारी द्वारा समर्थित नहीं है और स्पष्ट रूप से एक्सप्लोरर (03/2019) द्वारा
— मार्को रोमानो
2
अच्छा समाधान, केवल कवरेज 74,8% सीमित है। शायद भविष्य में
— यानी १४
1
आश्चर्यजनक है कि। बहुत बहुत धन्यवाद।
— मिकेल फेनफॉस
1
अगले आने वाले वर्षों में यह सबसे रेलेवन उत्तर होगा।
— नूरूल हुदा
22 
$('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

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

— फिलिप सैंडर
स्रोत
1
"event.preventDefault ();" प्रतिस्थापित कर सकते हैं "वापस झूठे!"
— एंड्रेस अलग
कहने के लिए क्षमा करें, लेकिन बिना किसी चिकनाहट के जल्दी से लंगर नाम के पेज पर काम करने और दिखाने के लिए नहीं।
— कमलेश
18

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

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

चिपचिपे हेडर वाली साइटों के लिए, scroll-padding-topसीएसएस का उपयोग ऑफसेट प्रदान करने के लिए किया जा सकता है।

— कोको पफ्स
स्रोत
1
मुझे यह जवाब सबसे ज्यादा पसंद है। हालाँकि, वहाँ एक ऑफसेट प्रदान करने के लिए कोई रास्ता नहीं है। जैसा कि एक निश्चित हेडर के मामले में आवश्यक होगा।
— bskool
दुर्भाग्य से, सीएसएस स्क्रॉल-व्यवहार संपत्ति के लिए उतना ही खराब समर्थन: developer.mozilla.org/en-US/docs/Web/CSS/…
— दिमित्री नेवज़ोरोव
15

केवल सीएसएस

html {
    scroll-behavior: smooth !important;
}

आपको केवल इसे जोड़ने की आवश्यकता है। अब आपके आंतरिक लिंक स्क्रॉलिंग का व्यवहार स्ट्रीम-फ्लो की तरह सुचारू हो जाएगा।

नोट : सभी नवीनतम ब्राउज़र ( Operaऔर Chrome, Firefoxआदि) इस सुविधा का समर्थन करते हैं।

विस्तार से समझने के लिए, इस लेख को पढ़ें

— Wasif
स्रोत
1
अच्छा! यह स्वीकृत उत्तर क्यों नहीं है? हमें उस सभी जावास्क्रिप्ट की आवश्यकता नहीं है!
— ट्रेवर डे कोइकोक
1
यह बहुत अच्छा काम करता है, यह स्वीकृत उत्तर होना चाहिए।
— कब्र
— रयान झोउ
1
यह एक आकर्षण की तरह काम करता है। js की कोई आवश्यकता नहीं
— नवबोर
यह चिकनी स्क्रॉल के लिए सबसे अच्छा समाधान है कभी! धन्यवाद!
— yehanny
10

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

$('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

— सारा बुआ
स्रोत
9
यह सामान्य नहीं है, यह jQuery है।
— अरादमन
6 
$(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/

— KingRider
स्रोत
1
यह केवल आंतरिक पेज एंकर लिंक के लिए काम करने लगता है, लेकिन अन्य पृष्ठों के एंकर लिंक काम नहीं करते हैं, उदाहरण के लिए वेबसाइट.
— com
5

यहां पहले से ही बहुत सारे अच्छे उत्तर हैं - हालांकि वे सभी इस तथ्य को याद कर रहे हैं कि खाली लंगर को बाहर करना होगा । अन्यथा खाली स्क्रिप्ट पर क्लिक करते ही वे स्क्रिप्ट जावास्क्रिप्ट त्रुटियों को उत्पन्न करती हैं।

मेरी राय में सही उत्तर इस प्रकार है:

$('a[href*=\\#]:not([href$=\\#])').click(function() {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});
— Blackbam
स्रोत
4

JQuery का उपयोग:

$('a[href*=#]').click(function(){
  $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  return false;
});
— brequinn
स्रोत
3

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

$(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;
        });
    });
});
— पोरौटी
स्रोत
+1 के लिए stop()हालांकि url crumb अपेक्षा के अनुरूप काम नहीं करता है: बैक बटन वापस नहीं लाता है, यह इसलिए है क्योंकि जब एनीमेशन पूरा हो जाता है उसके बाद url को crl में सेट किया जाता है। यह यूआरएल में एक टुकड़ा के बिना बेहतर है, उदाहरण के लिए कि airbnb कैसे करता है।
— एरिक
3

एचटीएमएल

<a href="#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

या पूर्ण पूर्ण URL के साथ

<a href="https://somewebsite.com/#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

jQuery

$j(function() {
    $j('a.smooth-scroll').click(function() {
        if (
                window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            &&  window.location.hostname == this.hostname
        ) {
            var target = $j(this.hash);
            target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $j('html,body').animate({
                    scrollTop: target.offset().top - 70
                }, 1000);
                return false;
            }
        }
    });
});
— जसमीत सिंह
स्रोत
3

आधुनिक ब्राउज़र इन दिनों थोड़े तेज़ हैं। एक SetInterval काम कर सकता है। यह फ़ंक्शन इन दिनों क्रोम और फ़ायरफ़ॉक्स में अच्छी तरह से काम करता है। (सफारी में थोड़ी धीमी, आईई से परेशान नहीं)

function smoothScroll(event) {
    if (event.target.hash !== '') { //Check if tag is an anchor
        event.preventDefault()
        const hash = event.target.hash.replace("#", "")
        const link = document.getElementsByName(hash) 
        //Find the where you want to scroll
        const position = link[0].getBoundingClientRect().y 
        let top = 0

        let smooth = setInterval(() => {
            let leftover = position - top
            if (top === position) {
                clearInterval(smooth)
            }

            else if(position > top && leftover < 10) {
                top += leftover
                window.scrollTo(0, top)
            }

            else if(position > (top - 10)) {
                top += 10
                window.scrollTo(0, top)
            }

        }, 6)//6 milliseconds is the faster chrome runs setInterval
    }
}
— littleboots
स्रोत
3

स्क्रॉल-व्यवहार का उपयोग करके ऐसा करने का एक सीएसएस तरीका है। निम्नलिखित संपत्ति जोड़ें।

    scroll-behavior: smooth;

और वह यह है। कोई जे एस की आवश्यकता है।

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>
स्निपेट का विस्तार करें

पुनश्च: ब्राउज़र संगतता की जाँच करें।

— संतोष
स्रोत
किस कंटेनर में मुझे स्क्रॉल-व्यवहार का उपयोग करना चाहिए: चिकनी;
— CraZyDroiD
संदेह के मामले में, इसे बॉडी टैग @CraZyDroiD
— संतोष
2

इसे जोड़ना:

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

किसी भी तरह से ऊर्ध्वाधर ऑफसेट अशक्त है

top - 72

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

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

यहाँ पूर्ण js का उपयोग कर रहा हूँ:

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;
});
— रीड
स्रोत
2

यह समाधान विभिन्न URL के एंकर लिंक को तोड़े बिना, निम्न URL के लिए भी काम करेगा।

http://www.example.com/dir/index.html
http://www.example.com/dir/index.html#anchor

./index.html
./index.html#anchor

आदि।

var $root = $('html, body');
$('a').on('click', function(event){
    var hash = this.hash;
    // Is the anchor on the same page?
    if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
        $root.animate({
            scrollTop: $(hash).offset().top
        }, 'normal', function() {
            location.hash = hash;
        });
        return false;
    }
});

मैंने अभी तक सभी ब्राउज़रों में इसका परीक्षण नहीं किया है।

— जादुई
स्रोत
2

इससे 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;
    });
});
— PanicBus
स्रोत
2 
$("a").on("click", function(event){
    //check the value of this.hash
    if(this.hash !== ""){
        event.preventDefault();

        $("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);

        //add hash to the current scroll position
        window.location.hash = this.hash;

    }



});
— ABK
स्रोत
2

परीक्षण किया और सत्यापित कोड 

<script>
jQuery(document).ready(function(){
// Add smooth scrolling to all links
jQuery("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  jQuery('html, body').animate({
    scrollTop: jQuery(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
} // End if
});
});
</script>
— आतिफ तारिक
स्रोत
1

मैंने यह "/ xxxxx # asdf" और "#asdf" href एंकर दोनों के लिए किया

$("a[href*=#]").on('click', function(event){
    var href = $(this).attr("href");
    if ( /(#.*)/.test(href) ){
      var hash = href.match(/(#.*)/)[0];
      var path = href.match(/([^#]*)/)[0];

      if (window.location.pathname == path || path.length == 0){
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
        window.location.hash = hash;
      }
    }
});
— AndreDurao
स्रोत
1

यहाँ मैं एक हल के लिए कई लिंक और एंकर के लिए लागू समाधान है:

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

<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 का धन्यवाद

— collyg
स्रोत
1

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

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

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

— Niclas
स्रोत
1

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

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

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

— rotring05
स्रोत
1

आप एंकर टैग के ऑफ़सेट टॉप के window.scroll()साथ उपयोग कर सकते हैं behavior: smoothऔर topयह सुनिश्चित कर सकते हैं कि एंकर टैग व्यूपोर्ट के शीर्ष पर होगा।

document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', function (e) {
        e.preventDefault();
        var href = this.getAttribute("href");
        var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
        //gets Element with an id of the link's href 
        //or an anchor tag with a name attribute of the href of the link without the #
        window.scroll({
            top: elem.offsetTop, 
            left: 0, 
            behavior: 'smooth' 
        });
        //if you want to add the hash to window.location.hash
        //you will need to use setTimeout to prevent losing the smooth scrolling behavior
       //the following code will work for that purpose
       /*setTimeout(function(){
            window.location.hash = this.hash;
        }, 2000); */
    });
});

डेमो:

कोड स्निपेट दिखाएं

आप बस सीएसएस संपत्ति scroll-behaviorको सेट कर सकते हैं smooth(जो कि अधिकांश आधुनिक ब्राउज़र समर्थन करते हैं) जो जावास्क्रिप्ट की आवश्यकता को कम करता है।

कोड स्निपेट दिखाएं

— hev1
स्रोत
0

साझा करने के लिए धन्यवाद, जोसेफ सिलबर। मानक व्यवहार को बनाए रखने के लिए मामूली बदलाव के साथ ईएस 6 के रूप में यहां आपका 2018 समाधान (ऊपर स्क्रॉल करें):

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

    const targetElement = document.querySelector(this.getAttribute("href"));
    targetElement.scrollIntoView({
      block: "start",
      alignToTop: true,
      behavior: "smooth"
    });
  });
});
— Motine
स्रोत
0

Jquery और id के बजाय निर्दिष्ट नाम के साथ लंगर टैग के लिए एनिमेट करने की आवश्यकता होती है, जबकि ब्राउज़र url में हैश जोड़ते हैं। इसके अलावा jquery के साथ अधिकांश उत्तरों में एक त्रुटि को ठीक करता है जहां # संकेत बचने वाले बैकस्लैश के साथ उपसर्ग नहीं किया जाता है। पिछला बटन, दुर्भाग्य से, पिछले हैश लिंक पर वापस ठीक से नेविगेट नहीं करता है ...

$('a[href*=\\#]').click(function (event)
{
    let hashValue = $(this).attr('href');
    let name = hashValue.substring(1);
    let target = $('[name="' + name + '"]');
    $('html, body').animate({ scrollTop: target.offset().top }, 500);
    event.preventDefault();
    history.pushState(null, null, hashValue);
});
— jjxtra
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.